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在 网 络 浪潮 中 随 着 宽带 的 普及 ， 上 网 变 得 越 来 越 方便 ， 就 连 以 前 只 有 专业 公司 才能 提供 的 Web 服务 
现在 许多 普通 的 宽带 用 户 也 能 做 到 。 您 是 否 也 有 种 冲动 ， 想 自己 来 制作 网 站 ， 为 自己 在 网 上 安 个 家 ? 也 
许 你 会 觉得 网 页 制作 很 难 ， 然 而 如 果 使 用 Dreamweaver CC 2018， 即 使 制作 一 个 功能 强大 的 网 站 ， 也 是 
件 非 常 容易 的 事情 。 

被 誉 为 “网 页 制作 三 剑客 ”之 一 的 Dreamweaver CC 2018 是 Adobe 公司 收购 Macromedia 公司 后 推 
出 的 网 页 设计 制作 工具 ， 是 继 Dreamweaver CC 2017 之 后 的 升级 版 本 ， 是 目前 最 完美 的 网 站 制作 工具 。 
Dreamweaver CC 2018 是 一 种 专业 的 HTML 编辑 器 , 用 于 对 Web 站 点 、Web 页 和 Web 应 用 程序 进行 设计 、 
编码 和 开发 。 无 论 您 喜欢 直接 编写 HTML 代码 ， 还 是 偏爱 “所 见 即 所 得 ”的 工作 环境 ，Dreamweaver 
CS4 都 会 为 您 提供 许多 方便 的 工具 ， 助 您 迅速 高 效 地 制作 网 站 。 


一 、 本 书 特 点 


实用 性 强 

本 书 的 编者 都 是 高 校 从 事 计 算 机 图 形 图 像 教 学 研究 多 年 的 一 线 人 员 ， 具 有 丰富 的 教学 实践 经 验 与 
教材 编写 经 验 ， 有 一 些 执 笔者 是 国内 Dreamweaver CC 2018 图 书 出 版 界 知名 的 作者 ， 前 期 出 版 的 一 些 
相关 书籍 经 过 市 场 检 验 很 受 读 者 欢迎 。 多 年 的 教学 工作 使 他 们 能 够 准确 地 把 握 学 生 的 心理 与 实际 需求 ， 
本 书 是 作者 总 结 多 年 的 设计 经 验 以 及 教学 的 心得 体会 ， 历 时 多 年 的 精心 准备 ， 力 求全 面 、 细 致 地 展现 
Dreamweaver CC 2018 软件 在 网 站 设计 制作 应 用 领域 的 各 种 功能 和 使 用 方法 。 

回 实例 丰富 

本 书 的 实例 不 管 是 数量 还 是 种 类 ， 都 非常 丰富 。 从 数量 上 说 ， 本 书 结合 大 量 的 网 站 设计 制作 实例 ， 
详细 讲解 了 Dreamweaver CC 2018 知识 要 点 ， 让 读者 在 学 习 案 例 的 过 程 中 潜移默化 地 掌握 Dreamweaver 
CC 2018 软件 的 操作 技巧 。 

突出 提升 技能 

本 书 从 全 面 提升 Dreamweaver CC 2018 实际 应 用 能 力 的 角度 出 发 ， 结 合 大 量 的 案例 来 讲解 如 何 利 用 
Dreamweaver CC 2018 软件 设计 开发 网 站 ， 使 读者 了 解 Dreamweaver CC 2018， 并 能 够 独立 地 完成 各 种 网 
站 设计 与 制作 。 

本 书 有 很 多 实例 本 身 就 是 网 站 开发 项 目 案例 ， 经 过 作者 精心 提炼 和 改编 ， 不 仅 保 证 读者 能 够 学 好 知 
识 点 ， 更 重要 的 是 能 够 帮助 读者 掌握 实际 的 操作 技能 ， 同 时 培养 网 站 开发 实践 能 力 。 


二 、 本 书 内 容 


全 书 分 为 12 章 ， 全 面 、 详 细 地 介绍 了 Dreamweaver CC 2018 的 特点 、 功 能 、 使 用 方法 和 技巧 。 具 体 
内 容 如 下 : 网 页 制作 基础 知识 、 站 点 构建 与 管理 、 编 辑 网 页 文本 、 在 网 页 中 应 用 图 像 、 用 表格 规划 网 页 、 
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超级 链接 的 应 用 、 使 用 多 媒体 对 象 、 利 用 CSS+Div 设计 网 页 、 创 建 表单 网 页 、 应 用 行为 创建 交互 效果 、 
统一 站 点 风格 、 旅 游 网 站 制作 综合 实例 的 详细 制作 过 程 。 


三 、 本 书 服务 


回 本 书 的 技术 问题 或 有 关 本 书信 息 的 发 布 

读者 如 果 遇 到 有 关 本 书 的 技术 问题 ， 可 以 登录 网 站 www.sjzswsw.com 或 将 问题 发 到 邮箱 
win760520@126.com， 我 们 将 及 时 回复 。 也 欢迎 加 入 图 书 学 习 交流 群 (QQ 群 : 512809405 ) 交流 探讨 。 

加 安装 软件 的 获取 

按照 本 书 上 的 实例 进行 操作 练习 ， 以 及 使 用 Dreamweaver CC 2018 进行 网 站 设计 与 制作 时 ， 需 要 事 
先 在 计算 机 上 安装 相应 的 软件 。 读 者 可 从 Internet 中 下 载 相 应 软件 ， 或 者 从 软件 经 销 商 处 购买 。QQ 交流 
群 也 会 提供 下 载 地 址 和 安装 方法 的 教学 视频 。 

加 手机 在 线 学 习 

为 了 配合 各 学 校 师 生 利用 本 书 进行 教学 的 需要 ， 随 书 附 有 多 个 二 维 码 ， 内 容 为 书 中 所 有 实例 网 页 文 
件 的 源 代 码 及 相关 资源 以 及 实例 操作 过 程 录 屏 动画 ， 另 外 附 赠 大 量 实 例 素 材 ， 供 读者 在 学 习 中 使 用 。 


四 、 关 于 作者 


本 书 主要 由 职场 无 忧 工作 室 编写 ， 具 体 参 与 本 书 编写 的 有 胡 仁 喜 、 刘 昌 丽 、 康 士 延 、 王 敏 、 关 陪 聪 、 
杨 雪 静 、 李 亚 莉 、 李 兵 、 甘 勤 涛 、 王 培 合 、 王 艳 池 、 王 玮 、 孟 培 张 训 、 王 佩 楷 、 和 孙 立 明 、 王 玉 秋 、 王 
义 发 、 解 江 坤 、 秦 志 霞 、 井 晓 翠 等。 本 书 的 编写 和 出 版 得 到 了 很 多 朋友 的 大 力 支持 ， 值 此 图 书 出 版 发 行 
之 际 ， 向 他 们 表示 衷心 的 感谢 。 同 时 ， 也 深 深 感谢 支持 和 关心 本 书 出 版 的 所 有 朋友 。 

书 中 主要 内 容 来 自 于 编者 多 年 来 使 用 Dreamweaver 的 经 验 总 结 ， 也 有 部 分 内 容 取 自 于 国内 外 有 关 文 
献 资料 。 虽 然 几 易 其 稿 ， 但 由 于 时 间 仓促 ， 加 之 水 平 有 限 ， 书 中 丝 漏 与 失误 在 所 难免 ， 尽 请 广大 读者 批 
评 指正 。 
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: Dreamweaver CC 2018 是 由 Adobe 公 司 开发 的 专业 HTML 编辑 器 ， 
用 于 对 Web 站 点 、Web 页 面 和 Web 应 用 程序 进行 设计 、 编 辑 和 开发 。 
bl ”利用 Dreamweaver CC 2018 的 可 视 化 编辑 功能 ， 用 户 可 以 快速 地 创建 
lL 页面 而 无 须 编写 任何 代码 ; 


令 了 解 Dreamweaver CC 2018 安装 与 卸载 的 方法 
急 熟悉 Dreamweaver CC 2018 的 工作 界面 及 基本 操作 


令 掌握 网 页 的 基本 操作 
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1.1 认识 Dreamweaver CC 2018 


Dreamweaver CC 2018 是 一 款 集 网 页 制作 和 网 站 管理 于 一 身 的 所 见 即 所 得 网 页 编辑 器 ， 利 用 它 可 以 
轻而易举 地 制作 出 跨越 平台 限制 和 浏览 器 限制 的 充满 动感 的 网 页 。 随 着 技术 的 不 断 发 展 , HTML5、CSS3 
转换 、jQuery 和 jQuery Mobile 等 新 技术 也 应 用 到 Dreamweaver CC 2018 中 。Dreamweaver CC 2018 势必 
成 为 各 种 工程 师 们 最 理想 的 Web 开发 工具 。 


Dreamweaver CC 2018 在 Windows 系统 中 安装 的 最 低 系统 要 求 
CPU InteT Core ™ i3 处 理 器 和 更 高 版 本 ， 或 同等 性 能 的 兼容 型 处 理 器 
操作 系统 |Microsoft Windows 7 Service Pack 1、Windows 8.1 或 Windows 10 
内 存 2GB 内 存 
硬盘 空间 | 2GB 可 用 硬盘 空间 用 于 安装 ; 安装 过 程 中 需要 约 2GB 额外 的 可 用 空间 ( 无 法 安装 在 可 移动 闪存 设备 上 ) 
显示 器 “| 1280 x 1024 显示 器 ，16 位 视频 卡 
产品 激活 | 必须 具备 Internet 连接 并 完成 注册 ， 才 能 激活 软件 、 验 证 订阅 和 访问 在 线 服 务 


Dreamweaver CC 2018 在 Mac OS 中 安装 的 系统 要 求 
CPU 具有 64 位 支持 的 多 核 mtel 处 理 器 
操作 系统 | Mac OS v10.13、OSXv10.12 或 OSXv10.11 


内 存 2GB 内 存 
硬盘 空间 2GB 可 用 硬盘 空间 用 于 安装 ; 安装 过 程 中 需要 约 2GB 额外 的 可 用 空间 ( 无 法 安装 在 使 用 区 分 大 小 写 的 文件 系 
统 的 卷 或 可 移动 闪存 设备 上 ) 


显示 器 ”|1280 x 1024 显示 器 ，16 位 视频 卡 
产品 激活 | 必须 具备 Intemet 连接 并 完成 注册 ， 才 能 激活 软件 、 验 证 订阅 和 访问 在 线 服务 


1.1.1 安装 Dreamweaver CC 2018 


Creative Cloud( 创意 云 ) 是 Adobe 提供 的 云 服 务 之 一 , 它 将 创意 设计 需要 的 所 有 元 素 整合 到 一 个 平台 ， 
简化 了 整个 创意 过 程 。 自 Adobe Dreamweaver CC 起 ， 安 装 不 再 提供 光盘 、 独 立 安装 包 等 ， 应 使 用 Adobe 
ID 登录 创意 云 客户 端 在 线 安装 、 激 活 。 

本 节 简 要 介绍 下 载 、 安 装 Dreamweaver 应 用 程序 ， 并 使 用 Creative Cloud 客户 端 管理 、 更 新 
Dreamweaver 应 用 程序 的 方法 。 

(1) 打开 浏览 器 ， 在 地 址 栏 中 输入 https://www.adobe.com.cn/ 进入 Adobe 的 官网 。 在 页 面 导航 中 单 击 
“支持 与 下 载 "， 然 后 在 弹出 的 下 拉 菜 单 中 选择 “下 载 与 安装 ”， 如 图 1-1 所 示 。 
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图 1-1 选择 “下 载 与 安装 ” 
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(2 ) 在 弹出 的 界面 中 选择 要 下 载 的 软件 Dreamweaver， 单 击 进行 下 载 。 如 图 1-2 所 示 。 然 后 在 刷新 


的 网 页 中 单 击 “ 开 始 免 费 使 用 ”。 


ed 


免费 试用 版 下 载 

国 ”六 wvannp， 前 Se 
i | 2- 二 表 
图 Aher Eflects 四 

i 


图 1-2 选择 要 下 载 的 软件 


在 下 载 Dreamweaver 时 , 将 同时 下 载 Creative Cloud 桌面 应 用 程序 , 以 便 访问 Adobe 应 用 程序 和 服务 ， 
并 将 应 用 保持 在 最 新 版 本 。 下 载 完 成 后 ， 双 击 下 载 的 安装 程序 Dreamweaver_Set_Up.exe 开始 安装 。 安 装 
完成 后 ， 在 “开始 ”菜单 中 可 以 看 到 安装 的 应 用 程序 ， 在 桌面 上 可 看 到 Adobe Creative Cloud 的 图 标 图 


(3 ) 双击 Adobe Creative Cloud 的 图 标 图， 打开 如 图 1-3(a ) 所 示 的 Creative Cloud 客户 端 界面 。 
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登录 Creative Cloud 客户 端 需要 使 用 Adobe ID ， 如 果 还 没有 Adobe ID ， 则 单 击 “ 注 册 ” 按 钮 。 

在 这 里 ， 用 户 可 以 查看 已 安装 的 Adobe 应 用 程序 是 否 有 更 新 。 如 果 有 ， 在 如 图 1-3 (b ) 所 示 的 界面 
“更 新 ”按钮 ， 可 自动 下 载 更 新 并 安装 。 如 果 在 图 1-2 中 选择 下 载 的 软件 不 是 Dreamweaver， 可 
“试用 ”按钮 ， 自 动 安装 选择 的 软件 。 


关注 意 : 这 种 方法 安装 的 软件 只 是 试用 版 ， 若 要 使 用 完整 版 ， 可 到 经 销 商 处 购买 。 


1.1.2 印 载 Dreamweaver CC 2018 


(1 ) 双击 Adobe Creative Cloud 的 图 标 轩 ， 打 开 Creative Cloud 客户 端 界面 。 
(2 ) 单 击 Dreamweaver CC 2018 “开始 试用 ” 右 侧 的 按钮 圈 , 在 弹出 的 下 拉 菜 单 中 选择 “ 印 载 ”, 如 图 1-4 
所 示 ， 即 可 印 载 该 软件 
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图 1-4 选择 “ 钾 载 ”命令 


1.1.3 ”启动 与 退出 


Dreamweaver CC 2018 经 过 重新 设计 ， 具 备 更 直观 的 、 可 自 定义 的 现代 化 用 户 界面 ， 更 易于 访问 的 
菜单 和 面板 ， 以 及 可 配置 的 上 、 下 文 相关 工具 栏 。 


1. 启动 
在 Adobe Creative Cloud 客户 端 界面 的 “Apps” 面 板 中 找到 应 用 程序 图 标 国 ,然后 单 


“打开 ”按钮 ; 


Eh 


或 执 


体验 ”， 


行 “ 开 始 " 
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"|“ 所 有 程序 "|“Adobe Dreamweaver CC 2018” 命令 , 即 可 启动 Dreamweaver CC 2018 中 文 版 。 


为 帮助 


户 快速 适应 Dreamweaver CC 2018 工作 区 中 的 更 改 ， 初 次 启动 时 ，Adobe 提供 “首次 使 用 


户 可 以 快速 完成 自 定义 体验 ， 以 找到 适合 的 工作 区 和 主题 选项 ， 如 图 1-5 所 示 。 


得 ) 提示 : 开发 人 员工 作 区 默认 情况 下 仅 包括 开发 人 员 对 网 站 进行 编码 时 最 必 不 可 少 的 面板 ， 
例如 “文件 ”面板 和 “代码 片段 ”面板 。 

标准 工作 区 包括 处 理 代码 和 设计 时 所 需 的 所 有 内 容 ， 例 如 “文件 “CC 库 ”“CSS 设计 器 ”“ 插 
入 ”“DOM”“ 资 源 "“ 代 码 片段 ”面板 。 建 议 初学 者 选择 标准 工作 区 。 


在 


欢迎 加 入 
全 新 Dreamweaver 简介 您 希望 如 何人 


Dreamweaver? 


mm 
Dreamweaver CCY 


很 好 ! 现在 请 选择 颜色 主题 您 现在 即 可 开始 ! 


图 1-5 首次 自 定义 体验 


首次 启动 最 新 版 本 的 Dreamweaver 时 ， 可 以 看 到 一 个 全 新 的 欢迎 屏幕 。 除 了 可 快速 访问 最 近 打 开 的 
文件 、Creative Cloud 文件 和 初学 者 模板 ， 欢 迎 屏幕 顶部 还 显示 有 “工作 ” “学习” 两 个 选项 卡 。“ 工 作 ” 
选项 卡 用 于 访问 最 近 打 开 的 文件 ;“ 学 习 ” 选 项 卡 用 于 访问 Dreamweaver 的 学 习 视频 。 

启动 Dreamweaver CC 2018 或 关闭 所 有 Dreamweaver 文档 时 都 会 显示 新 的 “开始 ”页 ,如 图 1-6 所 示 。 


“开始 ”页 可 以 方便 地 访问 最 近 使 用 过 的 文件 、 库 和 起 始 页 模板 。 


2. 退出 Dreamweaver 


和 9 单 击 月 
和 执行 


目 户 界面 右上 角 的 “关闭 ”按钮 2. 
“文件 ”| “退出 ”命令 。 
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日 


Dreamweaver 


图 1-6 标准 工作 区 的 开始 页 


1.2 Dreamweaver CC 2018 的 工作 界面 


Dreamweaver CC 2018 的 工作 区 将 多 个 文档 集中 到 一 个 界面 中 ， 这 样 不 仅 可 以 降低 系统 资源 的 占用 ， 
而 且 还 可 以 更 加 方便 地 操作 文档 。Dreamweaver CC 2018 的 操作 界面 包括 菜单 栏 ,文档 工具 栏 .通用 工具 栏 、 
文档 窗口 、 状 态 栏 和 浮动 面板 组 。 如 图 1-7 所 示 为 Dreamweaver CC 2018 的 操作 界面 


菜单 栏 文档 工具 栏 


标 全 - 必 ! 
文件 (月 编 锅 (E) 查看 (V) 搬入 (1) 工具 (T) 查找 (D) 站 点 (S) 宣 口 (W) 帮助 (H) 
代码 ”新 分 “实时 视图 ~ 
Untitled-2 x 


通用 p ar 
工具 栏 ~ 本 (Cc) 
addons 
AutoCAD2018 
Autodesk 
Drvers 
nt 浮动 
honk 面板 组 
Perflogs 
Program Fies 
Program Fies (x86) 
Users 
Windows 
Cmdcfoini 
CoraDRW ,exe 
CorelPP.dl 


<1doctype html> 
i 


图 1-7 Dreamweaver CC 2018 的 操作 界面 
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1.2.1 菜单 栏 


Dreamweaver CC 2018 的 主 菜单 共 分 九 种 , 文件 、 编辑 、 查看、 插入 、 工具、 查找 、 站 点 、 窗口 和 帮助 ， 
如 图 1-8 所 示 。 


文件 ( 明 ” 编 轧 (E) ”查看 (V) 插入 (1 工具 (T) 查找 (D) ”站 点 (S) ”窗口 (W) ”帮助 (H) 


图 1-8 菜单 栏 


1. “文件 ”菜单 

“文件 ”菜单 如 图 1-9 所 示 ， 包 含 文件 操作 的 标准 菜单 项 ， 还 包括 用 于 查看 当前 文档 或 对 当前 文档 执 
行 操作 的 命令 。 

2.“ 编 辑 ” 菜 单 

“编辑 ”菜单 如 图 1-10 所 示 ， 包 含 用 于 基本 编辑 操作 的 标准 菜单 项 。 不 仅 包括 文本 、 图 像 、 表 格 等 
网 页 元 素 命令 ,而 且 提供 对 键盘 快捷 方式 编辑 器 和 代码 格式 的 访问 ,以 及 对 Dreamweaver CC 2018“ 首 选项 ” 
的 访问 。 

3.“ 查 看 ”菜单 

“查看 ”菜单 如 图 1-11 所 示 ， 用 于 在 文档 的 各 种 视图 之 间 进 行 切换 ， 并 且 可 以 显示 和 隐藏 相关 
文件 。 


| 


加 Wi(U) 设置 页 而 属性 Carl+Z 
MR) Crlty 
更 WO CsX 
排 由 Ch+C 
RE 千 巾 (P) CultV 
新 建 (N)-- CultN 还 至 性 村 了 (S)- Cl+ShifV 
打开 (O)- Ca+O 全 站 W Cul+A 
打开 怖 折 的 文件 (T) 远 择 父 标 答 (G) Clt[ 
0) CultW 远近 子 标签 (H) Col+] 
全 部 关闭 (E) Curl+Shit+W 村 Fi(G) i 
保存 (S) Ch+S 一- — 
另存 为 (A).. Cl+Shift+s 本 示 代码 提 示 (H) CultH 
保存 全 部 (U) 代码 折 知 (S) 
保存 所 有 相关 文件 (R) 快速 奈 径 六 各 可 (Q) GT 
另存 为 模板 (M)-… He 
回复 至 上 次 的 保存 (R) 表格 » BO 
附 jn 样式 表 (A)- Ben * 拆 分 (S) ， 
导入 四 ， 术 磺 避 性- ed) 
HE) » 重复 项 (E) 切换 视图 (V) Ctrl+Alt+™ 
打印 代码 (P).… Ctrl+P f(D) » 实时 代码 (D) 
S 天 让 5 了 检查 四 Ah+Shift+Fll 
验证 » 朗 车 模式 (P) » 代码 视图 迁 项 (W) » 
与 过 程 服务 器 比较 (W) bn » 实 9 杭 轩 项 (O) 
设计 备注 (6)-. 局 步 设置 (S) » 局 新 实 对 视图 (E) 5 
人 快 建 刍 ( 人 一 相关 文件 (R) 上 
退出 00 CrQ 首先 项 (P).- Ca+U 相关 文件 选项 (0) » 
图 1-9 “文件 ”菜单 图 1-10 “编辑 ”菜单 图 1-11 “查看 ”菜单 
4.“ 插 入 ”菜单 
“插入 ”菜单 如 图 1-12 所 示 ， 提 供 将 页 面 元素 插 入 到 网 页 中 的 命令 。 
5. “工具 ”菜单 
“工具 ”菜单 如 图 1-13 所 示 ， 用 于 更 改选 定 的 页 面 元 素 的 属性 ， 并 且 为 库 和 模板 执行 不 同 的 操作 。 
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Div(D) 

Image CarAlt+I 

兵车 (P) 

标量 (E) » 

Table Curl+AR+T 

Figure 

项 目 列表 (U) 

编号 列表 (O) 

列表 项 (D 

Hyperlink(p) 

Header 

Navigation(N) 第 尝 (M) 四 
Main 代码 江 澳 各 (C) Cl+AR+N 
Aside 标签 库 ()- 

Aride 将 Javascript 外 秆 0)- 

Section 清理 HTMUD- 

Footer 清理 Word 生成 的 HTMLU)- 

Pe 清理 Web 字体 加 本 标签 (当前 页 面 ) (N) 

表单 人 » 拼写 检查 (K) Shif+F7 
Bootstrap 组 件 (B) » 管理 字体 (M)- 

jQuery Mobile() » 库 四 
jQuery UL » 模板 (E) 上 
自 定义 收藏 赤 (C) 命 S(D) 
模板 仙 ) » HTMUH) 
最 近 的 代码 片断 (R) » css(O » 
图 1-12 “插入 ”菜单 图 1-13 “工具 ”菜单 


6.“ 查 找 ” 莱 单 

“查找 ”菜单 如 图 1-14 所 示 ， 用 于 在 当前 窗口 、 整 个 站 点 的 浏览 器 中 查找 ， 还 可 以 在 HTML 源 程序 
中 查找 或 替换 源 代 码 

全 新 的 “查找 和 替换 ” 部 ， 如 图 1-15 所 示 。 不 会 阻挡 屏幕 的 任何 部 分 ， 与 
Dreamweaver 的 早期 版 本 相 比 ， 更 加 便捷 且 高 效 ， 在 “查找 ”面板 中 输入 搜索 字符 串 
时 即 开始 查找 该 字符 串 ， 并 在 当前 文档 中 高 亮 显示 该 字符 串 的 所 有 实例 


栏 位 于 窗口 顶 


查找 和 莹 摘 人 ~ CatF 
查找 下 一 个 (N) B 
查找 上 一 个 (P) Shift+F3 
查找 所 于 人 S) 
坦 技 全 部 并 选择 (5) Cal+shifrF3 
梅 下 一 个 到 项 二 加 到 渤 区 (M) C+R 
呈 寺 并 析 下 一 个 四 本 项 才 0 到 渤 区 (XD Curl+ARR 
图 1-14 “查找 ”菜单 图 1-15 “查找 和 替换 ”对 话 框 


7.“ 站 点 ”菜单 

“请 点 ”菜单 如 图 1-16 所 示 ， 用 于 创建 、 打 开 和 编辑 站 点 ， 以 及 管理 当前 站 点 中 的 文件 
8.“ 窗 口 ”菜单 
“窗口 ”菜单 如 图 1-17 所 示 ， 提 供 对 Dreamweaver CC 2018 中 的 所 有 浮动 面板 和 窗口 的 访问 

9.“ 帮 助 ”菜单 

“帮助 ”菜单 如 图 1-18 所 示 ， 提 供 对 Dreamweaver CC 2018 帮助 系统 的 访问 ， 以 及 上 、 下 文 功能 提 
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示 重 置 和 错误 报告 的 处 理 。 
WIN 
管理 站 吉 (M)- 
(6) cultAlttD 
d(C) C+Alt+ Shift+D 
上 伟 (P) cutshiftu 


存 回 中 Curl+Alt+Shift+U 


AMTEmu by PainteR 
更 新 -~ 


关于 Dreamweaver(A) 


图 1-16 “站 点 ”菜单 图 1-17 “窗口 ”菜单 图 1-18 “和 帮助 ”菜单 


1.2.2 文档 工具 栏 


新 建 或 打开 一 个 网 页 文档 后 ， 文 档 窗口 顶部 显示 文档 工具 栏 ， 该 工具 栏 集中 在 文档 的 不 同 视图 之 间 
快速 切换 的 常用 命令 ， 如 图 1-19 所 示 。 


拆 分 ”实时 视图 ~ 


图 1-19 文档 工具 栏 


各 个 按钮 图 标的 功能 如 下 : 

Y 国 : 显示 代码 视图 。 

SEE 将 文档 窗口 进行 拆 分 ， 在 同一 屏幕 中 显示 “代码 ”视图 和 “设计 ”视图 或 “实时 视图 "。 

YY ES : 在 不 打开 浏览 器 的 情况 下 实时 预览 页 面 的 效果 。Dreamweaver CC 2018 整合 了 “设计 
视图 ”和 “实时 视图 "， 单 击 该 按钮 右 侧 的 倒 三 角形 按钮 ， 在 弹出 的 下 拉 菜单 中 可 选择 “设计 ” 


1.2.3 通用 工具 栏 


通用 工具 栏 位 于 界面 左 侧 ， 开 始 页 面 的 通用 工具 栏 如 图 1-20 所 示 ， 主 要 集中 了 
一 些 与 查看 文档 、 在 本 地 和 远程 站 点 间 传 输 文档 ， 以 及 代码 编辑 有 关 的 常用 命令 和 
选项 。 


晶 / 提示 : 不 同 的 视图 和 工作 区 模式 下 ， 显 示 的 通用 工具 栏 也 会 有 所 不 同 。 


9 国 : 单 击 该 按钮 显示 当前 打开 的 所 有 文档 列表 。 
图 1-20 通用 工具 栏 
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车 型 权 入 门 与 放言 


该 按钮 弹出 文件 管理 下 拉 菜 单 。 

该 按钮 ， 弹 出 实时 视图 选项 下 拉 菜 单 。 

: 隐藏 /显示 可 视 媒 体 查 询 栏 。 

较 : 打开 实时 视图 和 CSS 检查 模式 ， 以 可 视 方式 调整 

CSS 属性 。 

扩展 全 部 。 

: 格式 化 源 代 码 。 

: 应 用 注释 。 

删除 注释 。 

: 自 定义 工具 栏 。 单 击 该 按钮 打开 如 图 1-21 所 示 的 
“ 自 定义 工具 栏 ”对 话 框 ， 在 工具 列表 中 勾 选 需要 
的 工具 左 侧 的 复 选 框 ， 即 可 将 工具 添加 到 通用 工具 
栏 中 。 


1.2.4 ”文档 窗口 
文档 窗口 用 于 显示 当前 打开 或 编辑 的 文档 ， 根 据 选择 的 视图 不 同 而 显示 不 同 的 内 容 。 
单 击 文档 工具 栏 中 的 EEB 掖 钮 ， 切 换 到 “设计 ”视图 ， 如 图 1-22 所 示 。 文 档 窗 口 显示 的 内 容 与 浏览 


器 中 显示 的 内 容 基本 相同 。 使 用 Dreamweaver CC 2018 提供 的 工具 或 命令 ， 可 以 方便 地 进行 创建 、 编 辑 
文档 的 各 种 工作 ， 即 使 完全 不 懂 HTML 代码 的 读者 也 可 以 制作 出 精美 的 网 页 。 


日 四 加 上 


目 图 回回 图 


图 1-21 “ 自 定义 工具 栏 ”对 话 框 


文件 (。 妨 句 (E) 查看 (Vi 插入 () 工具 [T) 查找 D) ”站 点 (S) 窗口 (W) 帮助 (H) 
代码 拆 分 | 
index html x CUsers 人 | index html 加 


了 雹 文件 
Qs 
只 入 
氏 oo 


[二 
县 ,代码 片断 


图 1-22 “设计 ”视图 


单 击 文档 工具 栏 中 的 E 于 按钮 ,切换 到 “代码 ”视图 , 在 文档 窗口 中 显示 的 是 当前 文档 的 代码 ,如 图 1-23 
所 示 。 

在 编写 文档 时 ,如 果 要 兼顾 设计 样式 和 实现 代码 ,可 以 单 击 工具 栏 中 的 莉 议 钮 ,使 “代码 ” 视图 与 “ 设 
计 ” 视 图 (或 “实时 视图 ” ) 同 屏 显 示 ， 如 图 1-24 所 示 。 如 果 选 中 “设计 ”视图 或 者 “代码 ”视图 中 的 
某 一 部 分 ,“ 人 代码” 视图 或 者 “设计 ”视图 中 相应 的 网 页 元 素 也 同时 被 选中 。 
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Dw 文件 (A 篇 入 ( 昌 ， 吉 看 (V] 插入 人 ”工具 (] 查找 D) 站 点 (S)。 齐 D(wW) 帮助 [H) 


indexhtml x 
大 代码 base < 


jimages/pic_7-jpgn ， 


p> 


images/pic_8-jpg” wi 


a></p; 


inages/pic_9.jpg" wi 


图 1-23 “代码 ”视图 


文件 (F) 篇 句 (5) 查看 (Vi 插入 () 工具 (T) 查找 D) 站 点 (5 窗口 (W) 本 助 (H) 


6 文件 


QQ 于 


只 动 
饭 ooM 
[二 
, (CBA 


吴 插入 


73x211 


图 1-24 “ 拆 分 ”视图 


站 教 你 一 招 : 默认 情况 下 ， 水 平 拆 分 文档 窗口 ， 选 择 “ 查 看 ”|“ 折 分 ”|“ 顶 部 的 实时 视图 ” 
命令 ， 可 以 将 拆 分 的 两 个 视图 上 、 下 进行 调换 ; 选择 “查看 ”|“ 拆 分 ” |“ 垂直 拆 分 ”菜单 命令 ， 可 
以 将 文档 窗口 左 、 右 拆 分 ; 选择 “查看 ”|“ 拆 分 ”|“ 左 侧 的 实时 视图 ”命令 ， 可 以 将 拆 分 的 两 个 视 
图 左 、 右 进行 调换 。 
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Dreamweaver CC 2018 的 状态 栏 位 于 文档 窗口 底部 , 嵌 有 几 个 重要 的 工具 如 标签 选择 器 .Linting 图 标 、 
实时 预览 和 窗口 大 小 等 。“ 拆 分 ”视图 下 的 状态 栏 如 图 1-25 所 示 。 


文件 类 型 窗口 大 小 实时 预览 


标签 选择 器 Linting 图 标 输入 模式 行 号 和 列 号 
图 1-25 “ 拆 分 ”视图 下 的 状态 栏 


昌 / 提示 : 不 同 的 视图 下 ,状态 栏 上 显示 的 功能 图 标的 多 少 也 不 相同 。 在 “代码 ”视图 中 工作 时 ， 
状态 栏 会 显示 有 用 的 信息 。 


1. 标签 选择 器 

显示 当前 选 定 内 容 的 标签 。 单 击 该 标签 ， 可 以 选中 页 面 上 相应 的 区 域 。 例 如 ， 单 击 <body> 标签 可 以 
选择 文档 的 全 部 正文 。 

2.Linting 图 标 

Dreamweaver CC 2018 支持 Linting, 用 于 调试 网 页 或 网 页 的 一 部 分 代码 , 以 查找 任何 语法 或 逻辑 错误 。 
HTML 语法 错误 、CSS 中 的 分 析 错 误 或 JavaScript 文件 中 的 警告 都 是 Linting 要 标记 的 内 容 。 

状态 栏 中 的 Linting 图 标 指示 Linting 结果 : 红色 辆 表示 当前 文档 包含 错误 和 警告 ; 绿色 圈 表 示 当 前 
文档 没有 错误 。 


得 提示 : 当 文档 中 有 错误 或 警告 时 ， 单 击 状态 栏 上 的 Linting 图 标 ， 将 打开 “输出 ”面板 ， 如 
图 1-26 所 示 。 包 含 错误 或 警告 的 行将 分 别 以 红色 和 黄色 突出 显示 ， 双 击 “输出 ”面板 中 的 消息 可 跳 
转 到 发 生 错误 的 行 。 修 复 错误 后 ， 面 板 中 的 列表 会 滚动 以 显示 下 一 组 错误 。 在 “代码 ”视图 中 ， 将 
鼠标 悬 停 在 错误 行 的 行 号 上 ， 可 以 查看 错误 或 警告 预览 。 


p> ] start tag match failed [ <p ali 


图 1-26 “输出 ”面板 


3. 文件 类 型 

更 改 不 同文 件 类 型 的 语法 高 亮 显示 。Dreamweaver CC 2018 目前 适用 于 以 下 文件 类 型 的 代码 着 
色 : HIML、JS、CSS、PHP、XML 、LESS 、Sass、SCSS、SVG、Bash、C、C#、C++、clojure、 
CoffeeScript、 Dart、 Diff、 EJS、 Embedded Ruby、 Groovy、Handlebars、Haskell、Haxe、Java、JSON、 
Lua、Markdown、Markdown (GitHub)、 Perl、 属性 、Python、RDF Turtle、Ruby、Scala、SQL、Stylus、 文本 、 
VB、 VBScript、 XML 和 YAML。 
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1024x 768 ipad 4. 窗口 大 小 

es 单 击 窗口 大 小 区 域 可 弹出 如 图 1.27 所 示 的 “窗口 大 小 ”菜单 ， 该 菜 
te 单 仅 在 “设计 ”视图 和 “ 拆 分 ”视图 下 可 用 ， 用 于 调整 “文档 ”窗口 的 大 
1966x 1024 ipad pro 小 到 预定 义 或 自 定义 的 尺寸 ， 以 像素 为 单位 。 

2 显示 的 窗口 大 小 是 指 浏览 器 窗口 的 内 部 尺寸 ( 不 包括 边框 ) 更 改 “ 设 


a 计 ” 视 图 或 “实时 ”视图 中 页 面 的 视图 大 小 时 ， 仅 更 改 视图 大 小 的 尺寸， 


Y | 全 大 小 


多重 大 小 而 不 更 改 文档 尺寸 。 
eg 在 大 多 数 先进 的 移动 设备 中 ， 可 根据 设备 的 持 握 方式 更 改 页 面 方向 。 


当 用 户 以 垂直 方向 把 握 设备 时 ， 显 示 纵 向 视图 。 当 用 户 水 平 翻转 设备 时 ， 
图 1-27 “窗口 大 小 " 菜单 。 页 面 将 重新 调整 自身 ， 以 适合 横向 尺寸 。 在 Dreamweaver CC 2018 中 ， 实 
时 视图 和 设计 视图 中 都 提供 纵向 或 横向 查看 页 面 的 选项 ， 使 用 这 些 选 项 可 预览 用 于 移动 设备 的 页 面 。 


~ 


守 注意 : 在 Windows 中 ,用户 可 以 选中 “全 大 小 ”选项 将 文档 窗口 最 大 化 ， 以 便 它 填充 集成 
窗口 的 整个 文档 区 域 ， 此 时 无 法 调整 它 的 大 小 。 


5. 行 号 和 列 号 
行 号 和 列 号 指示 鼠标 指针 所 在 的 行 和 列 


6. 输入 模式 
输入 代码 时 ， 在 INS (插入 ) 模式 和 OVR ( 窗 盖 ) 模式 之 间 切 换 
7. 实时 预览 


Dreamweaver CC 2018 支持 在 多 个 设备 上 同时 预览 、 测 试 网 页 ， 且 不 需要 安装 任何 移动 应 用 程序 或 
将 设备 物理 连接 到 桌面 。 
单 击 “ 实 时 预览 ”按钮 用 让， 弹出 如 图 1-28 所 示 的 “实时 预览 ”窗口 

1 ) 在 浏览 器 中 预览 

默认 情况 下 , 将 启动 Internet Explorer 预览 网 页 。 单 击 “ 编 辑 列表 ”命令 , 如 图 1-29 所 示 的 “首选 项 ” 
对 话 框 ， 用 户 可 以 添加 浏览 器 ， 并 指定 主 浏览 器 和 次 浏览 器 。 


A 


Intemet pplorer Fl2 


图 1-28 “实时 预览 ”窗口 图 1-29 “首选 项 ”对 话 框 
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Dreamweaver CC 2018 已 与 浏览 器 连接 ， 在 浏览 器 中 预览 网 页 时 ,不 
需 刷 新 浏览 器 ， 就 能 在 浏览 器 中 实时 预览 页 面 更 改 。 

2 ) 在 设备 上 预览 

在 多 个 不 同 外 形 规格 的 设备 上 同时 测试 网 页 。 利 用 要 预览 网 页 的 移 
动 设备 扫描 “设备 预览 ”窗口 左 侧 的 二 维 码 ， 或 复制 显示 的 短 链接 ， 并 
粘贴 到 桌面 浏览 器 中 ,在 弹出 的 登录 窗口 中 成 功 登录 后 ， 已 连接 设备 
的 名 称 将 显示 在 “设备 预览 ”窗口 中 ( 图 1-30 )， 并 可 通过 该 设备 预览 图 1-30 “设备 预览 ”窗口 
网 页 。 


加 注意 : 要 在 设备 上 预览 网 页 ， 必 须 具备 以 下 条 件 : 

(1) 设备 上 安装 了 QR 代码 扫描 仪 。 

(2 ) 桌面 和 移动 设备 已 连接 到 Internet， 并 位 于 同一 网 络 中 。 

(3 ) 已 准备 好 Adobe ID 凭据 。 在 预览 时 , 使 用 桌面 上 Dreamweaver 所 用 的 Adobe ID 登录 设备 。 
(4) 设备 的 浏览 器 设置 中 启用 了 JavaScript 和 Cookie。 


1.2.6 浮动 面板 组 

在 Dreamweaver CC 2018 工作 环境 的 右 侧 停靠 着 许多 浮动 面板 ， 并且 自动 对 齐 。 这 些 面 板 可 以 自由 
地 在 界面 上 拖 动 ， 也 可 以 将 多 个 面板 组 合 在 一 起 ， 成 为 一 个 选项 卡 组 ， 以 扩充 文档 窗口 。 

在 “窗口 ”菜单 的 下 拉 菜 单 中 单 击 面板 名 称 可 以 打开 或 者 关闭 这 些 浮 动 面板 

1.“ 属 性 ”面板 

在 制作 网 页 时 ， 对 象 都 有 各 自 的 属性 ， 就 要 “属性 ”面板 对 对 象 属性 进行 设置 。“ 属 性 ”面板 的 设置 
项 目 会 根据 对 象 的 不 同 而 变化 ， 如 图 1-31 所 示 为 在 选中 图 形 对 象 时 “属性 ”面板 上 的 内 容 


图 1-31 “属性 ”面板 


默认 情况 下 , Dreamweaver CC 2018 没有 开启 “属性 ”面板 , 用 户 可 以 通过 “窗口 一 属性 ”命令 打开 ， 
并 且 “ 属 性 ”面板 上 的 大 部 分 内 容 都 可 以 在 “编辑 ”菜单 中 找到 

“属性 ”面板 分 成 上 .下 两 部 分 , 单 击 面板 右 下 角 的 加 按钮 可 以 关闭 “属性 ”面板 的 下 面部 分 。 此 时 ， 
轿 按 钮 交 成 了 按钮 ， 单 击 此 按钮 可 以 重新 打开 “属性 ”面板 的 下 面部 分 。 

2.“ 插 入 ”面板 

网 页 的 内 容 虽 然 多 种 多 样 ， 但 是 都 可 以 称 为 对 象 ， 大 部 分 的 对 象 都 可 以 通过 “插入 ”面板 插入。 
Dreamweaver CC 2018 默认 开启 “插入 ”面板 ， 在 文档 窗口 右 侧 的 浮动 面板 组 中 单 击 “ 插 入 ”页 签 ， 即 
可 显示 “插入 ”面板 ， 如 图 1-32 所 示 。 

“插入 ”面板 的 初始 视图 为 “HITML” 面 板 ， 单 击 “ 插 入 ”面板 中 “HIML” 右 侧 的 下 拉 按 钮 ， 即 可 
在 弹出 的 下 拉 菜 单 中 选择 需要 的 面板 ， 从 而 在 不 同 的 面板 之 间 进行 切换 ， 如 图 1-33 所 示 的 “隐藏 标签 ” 


如 果 要 在 文档 中 添加 某 一 个 对 象 ， 打 开 相应 类 别 的 “插入 ”面板 ， 然 后 单 击 相应 的 图 标 即 可 。 
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Bootstrap 组 件 
jQuery Mobile 


jQuery UI 


项 目 列表 


编号 列表 


图 1-32 “插入 ”面板 图 1-33 “隐藏 标签 ”命令 


晶 儿 教 你 一 招 : 默认 状态 下 , “插入 ”面板 中 的 对 象 图 标 显示 右 侧 标签 ， 如 图 1-32 所 示 。 如 果 
单 击 如 图 1-33 中 下 拉 菜 单 中 的 “隐藏 标签 ”命令 ， 则 只 显示 对 象 图 标 而 不 显示 图 标 右 侧 的 标签 ， 如 
图 1-34 所 示 。 


图 1-34 ”隐藏 标签 的 “HTML” 插 入 面板 


3. 其 他 浮动 面板 
浮动 面板 的 一 个 好 处 是 可 以 节省 屏幕 空间 。 用 户 可 以 根据 需要 显示 或 隐藏 浮动 面板 ， 其 他 浮动 面板 
的 功能 简要 介绍 如 下 。 

资源 : 管理 站 点 资源 ， 比 如 模板 、 库 文件 、 各 种 媒体 、 脚 本 等 。 

9 行为 : 为 页 面 元 素 添加 、 修 改 Dreamweaver CC 2018 预 置 的 行为 和 触发 事件 ， 创 建 简单 的 交互 
效果 。 

和 代码 检查 器 : 在 单独 的 编码 窗口 中 查看 、 编 写 或 编辑 代码 ， 就 像 在 “代码 ”视图 中 工作 一 样 。 

CSS 设计 器 : 定义 、 编 辑 CSS 样式 。 

和 CSS 过 渡 效 果 : 创建 CSS 过 渡 效 果 。 使 用 CSS 过 渡 效 果 可 将 平滑 属性 变化 应 用 于 页 面 元 素 ， 以 
响应 触发 器 事件 ， 如 悬 停 、 单 击 和 聚焦 。 

外 DOM: 呈现 包含 静态 和 动态 内 容 的 交互 式 HTML 树 。 在 DOM 面板 中 编辑 HTML 结构 ， 可 在 实 
时 视图 中 查看 即时 生效 的 更 改 。 

和 Extract: 提取 Photoshop 复合 中 的 CSS、 图 像 、 字 体 、 颜 色 、 渐 变 和 度量 值 ， 直 接 添 加 到 
网 页 中 。 

和 文件 : 管理 本 地 计算 机 的 文件 及 站 点 文件 。 

和 jQuery Mobile 色 板 : 使 用 此 面板 可 以 在 jQuery Mobile CSS 文件 中 预览 所 有 色 板 ( 主题 ), 或 从 
jQuery Mobile Web 页 的 各 种 元 素 中 删除 色 板 。 

和 Git : 该 面板 用 于 高 效 地 对 网 站 资源 进行 版 本 管理 ， 可 以 使 用 文件 名 搜索 存储 库 中 的 文件 ， 并 在 
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搜索 结果 中 查看 文件 的 状态 ， 帮 助 用 户 跟踪 已 暂 存 、 已 修改 和 未 跟踪 的 文件 。 
和 结果 : 提供 HTML、CSS、ASP、JSP 等 一 系列 代码 的 参考 资料 、 验 证 是 否 有 代码 错误 、 检 查 各 
种 浏览 器 对 当前 文档 的 支持 情况 、 检 验 是 否 存 在 断 点 链接 ， 以 及 站 点 服务 器 的 测试 结果 
和 9 代码 片断 : 收集 、 分 类 一 些 非常 有 用 的 小 代码 ， 以 便 在 网 页 中 反复 使 
9 扩展 : 添加 扩展 功能 。 


辣 注意 : 在 安装 扩展 功能 前 必须 安装 功能 扩展 管理 器 ， 用 于 安装 和 管理 Adobe 应 用 程序 中 
的 扩展 功能 。 如 果 要 在 多 用 户 操作 系统 中 安装 所 有 用 户 都 能 访问 的 扩展 功能 ， 必 须 以 管理 员 身 份 
(Windows ) 或 Root 身份 (Mac OS 义 ) 登录 。 


1.2.7 上 机 练习 一 一 组 合 、 拆 分 浮动 面板 组 


> 练习 晶 标 


Dreamweaver CC 2018 三 个 重要 的 功能 分 别 是 网 页 设计 、 代 码 编写 和 应 用 
程序 开发 ， 相 应 的 浮动 面板 也 可 以 这 样 分 类 。 在 实际 使 用 中 ， 用 户 应 该 根据 自 
己 的 设计 习惯 ,将 常用 的 面板 组 合 在 一 起 ， 并 放 在 适当 的 地 方 ， 以 配置 出 最 适 
合 于 个 人 使 用 的 工作 环境 。 结 合 本 节 的 练习 实例 ， 使 读者 掌握 组 合 、 拆 分 浮动 
面板 组 的 具体 操作 方法 ， 


1-2 上 机 练习 一 一 组 合 、 
拆 分 浮动 面板 组 


/设计 思路 
首先 将 “插入 ”面板 从 “文件 ”面板 组 中 拆 分 出 来 ， 然 后 与 “资源 ”面板 合并 为 一 个 面板 组 。 


入 操作 步 对 


(1) 选择 “窗口 ”|“ 插 入 ”命令 ,打开 “插入 ”面板 

(2) 在 “插入 ”面板 的 标签 上 按 下 鼠标 左 键 ,然后 拖 动 到 合适 的 位 置 ， 释 放 鼠 标 。 此 时 “插入 ” 面 
板 成 为 一 个 独立 的 面板 ， 可 以 在 工作 界面 上 随意 拖 动 ， 如 图 1-35 所 示 

(3 ) 选择 “窗口 ”| “资源 ”命令 ,打开 “资源 ”面板 

(4) 在 “资源 ”面板 的 标签 上 按 下 鼠标 左 键 ， 然 后 拖 动 到 “插入 ”面板 上 ， 此 时 “插入 ”面板 顶端 
将 以 蓝 色 显示 ， 表 示 “ 插 入 ”面板 将 到 达 的 目的 位 置 ， 释 放 鼠 标 。 即 可 将 “插入 ”面板 与 “资源 ”面板 
进行 合并 ， 如 图 1-36 所 示 。 


a 
EE 
8 
日 


区 
四 日 上 日 日 日 日 日 


图 1-35 ”分离 出 前 “插入 ”面板 图 1-36 ”组合 “资源 ”面板 和 “插入 ”面板 
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1.3 ”网 页 的 基本 操作 


通过 1.2 节 的 学 习 ， 读 者 对 Dreamweaver CC 2018 的 工作 界面 应 该 有 一 个 初步 的 认识 。 本 节 将 介 
绍 网 页 操作 最 基本 的 三 个 操作 ， 即 创建 新 页 面 、 保 存 网 页 和 打开 已 有 的 网 页 文件 ， 让 读者 进一步 了 解 
Dreamweaver CC 2018 的 用 户 界面 和 操作 体验 


1.3.1 上 机 练习 


SD 红 习 目标 


本 节 通 过 讲解 创建 HTML 页 面 的 具体 步 又， 介绍 Dreamweaver CC 2018 支持 的 文档 类 型 和 预定 义 的 
框架 、 模 板 ， 使 读者 掌握 使 用 “新 建文 档 ” 创 建 页 面 的 方法 
/设计 思路 

首先 使 用 “新 建 ”命令 打开 “新 建文 档 ” 对 话 框 , 然后 选择 文档 类 型 、 是 否 使 用 框架 , 最 后 单 击 “ 创 
建 ” 按 钮 新 建 一 个 页 面 


户 帮 操作 步 卫 


(1) 执行 “文件 ”|“ 新 建 ”命令 ， 弹 出 如 图 1-37 所 示 的 “新 建文 档 ” 对 话 框 。 


创建 一 个 HTML 页 面 


1-3 上 机 练习 一 一 创建 
一 个 HTML 页 面 


图 1-37 “新 建文 档 ” 对 话 框 


(2 ) 在 对 话 框 最 左 侧 选择 想 要 创建 文件 的 类 型 和 模板 

和 新 建文 档 : 新 建 一 个 空白 的 网 页 文件 

和 启动 器 模板 : 创建 一 个 启动 器 页 面 。 选 中 这 一 项 后 ， 可 以 在 预 置 的 启动 器 类 型 中 选择 示例 页 面 布 
局 ， 快 速 地 创建 比较 专业 的 页 面 。 

和 9 网 站 模板 : 在 已 有 的 站 点 中 选择 一 个 模板 ， 创 建 一 个 与 模板 文件 布局 、 风 格 相同 的 页 面 。 但 只 有 
可 编辑 区 域 中 的 内 容 可 以 修改 ， 页面 的 其 他 区 域 处 于 锁定 状态 。 

本 节 练 习 选 择 “ 新 建文 档 ”。 

(3 ) 在 “新 建文 档 ” 对 话 框 中 的 “文档 类 型 ”列表 中 选择 “HTML”。 

在 这 里 ,读者 可 以 看 到 Dreamweaver CC 2018 可 创建 的 文档 类 型 有 十 多 种 。 

(4) 在 “框架 ”区 域 选择 是 否 应 用 Bootstrap 框架 。 

和 无 : 不 采用 框架 。 

和 Bootstrap 框 架 : 基于 Bootstrap 网 页 设计 框架 生成 页 面 。Bootstrap 框架 包括 适用 于 按钮 .表格 .导航 、 
图 像 旋 转 视图 等 网 页 元 素 的 CSS 和 HTML 模板 ， 以 及 几 个 可 选 的 JavaScript 插件 ， 用 于 开发 或 
编辑 移动 优先 的 网 站 ， 以 适应 不 同 屏幕 大 小 。 只 具备 基本 编码 知识 的 开发 人 员 也 能 够 开发 出 快速 
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响应 的 出 色 网 站 。 
新 版 本 软件 提供 对 Boots trap 4.0.0 版 的 支持 。 


(以 知识 拓展 
Bootstrap 文档 与 流体 网 格 文档 的 区 别 

在 Dreamweaver CC 2018 中 创建 Bootstrap 文档 与 创建 流体 网 格 文档 类 似 。 不 同 的 是 ， 流 体 网 格 
文档 针对 三 种 基本 外 形 规格 ( 手机 、 平 板 和 人 台式 机 ) 创建 ， 而 Bootstrap 针对 四 种 基本 屏幕 大 小 ( 小 型 、 
中 型 、 大 型 和 特大 型 ) 创建 文档 ， 如 图 1-38 所 示 。 

本 节 练 习 选 择 “ 无 ”。 

(5 ) 设置 文档 类 型 ， 也 就 是 设置 网 页 的 HTML 代码 的 版 本 。 默 认 使 用 HTML5。 

(6 ) 单 击 “ 创 建 ” 按 钮 关闭 对 话 框 。 即 可 创建 一 个 空白 的 HTML 文件 ,“ 拆 分 ”视图 如 图 1-39 所 示 。 


无 。 B00TSIRP @ 


Bootstrap CSS: 全 新 如 
口 使 用 现 有 文 上 


附加 CSS: 


设计 : 回忆 全 构建 布 局 


Bi 
30 px 


有 中 大 
576 px 768 px 997 px 


口 使 用 Extract 从 Photoshop 夏 合 中 构建 页 面 


图 1-38 四 种 基本 屏幕 大 小 图 1-39 “ 拆 分 ”视图 
从 图 1-39 可 以 看 出 ,尽管 当前 的 网 页 文件 是 空白 的 ,但 “代码 "视图 中 已 自动 生成 了 必要 的 HTML 代码 。 
1.3.2 ”保存 网 页 
在 Dreamweaver CC 2018 中 ， 保 存 网 页 文件 的 方法 随 保存 文件 目的 的 不 同 而 不 同 。 


1. 只 保存 当前 编辑 的 页 面 
执行 “文件 ” |“ 保存” 命令 。 


电 / 提示 : 如 果 是 第 一 次 保存 该 文件 , 则 执行 “文件 ”|“ 保 存 ” 命 令 会 弹出 “另存 为 ”对 话 框 。 
若 文件 已 保存 过 ， 则 执行 “文件 ” |“ 保存 ”命令 时 ， 直 接 保存 文件 。 


如 果 要 将 当前 编辑 的 页 面 以 另 一 个 文件 名 保存 ， 则 执行 “文件 ”| “另存 为 ”命令 。 

2. 保存 打开 的 所 有 页 面 

执行 “文件 ”|“ 保 存 全 部 ”命令 。 

3. 以 模板 的 形式 保存 

执行 “文件 ”|“ 另 存 为 模板 ”命令 ,打开 “另存 模板 ”对 话 框 : 在 “站 点 ”下 拉 列 表 框 中 选择 模板 
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保存 的 站 点 ,在 “另存 为 ”文本 框 中 输入 文件 的 名 称 ， 然 后 单 击 “ 保 存 ” 按 钮 。 


站 提示 : 第 一 次 保存 模板 文件 时 , Dreamweaver CC 2018 将 自动 为 站 点 创建 Templates 文件 夹 ， 
并 把 模板 文件 存放 在 Templates 文件 夹 中 。 


1.3.3 上 机 练习 


< 纹 习 日 标 


如 果 要 编辑 一 个 网 页 文件 ， 必 须 先 打开 该 文件 。Dreamweaver CC 2018 可 以 ”1-4 上 机 练习 一 一 打开 
打开 多 种 格式 的 文件 ， 如 htm 、html、shtml 、asp、php、js、dwt、xml、lbi、as、 已 有 的 网 页 
css 等 。 通 过 本 节 的 练习 实例 使 读者 掌握 打开 网 页 文件 的 操作 方法 。 


/设计 思路 


首先 使 用 “打开 ”命令 弹出 “打开 ”对 话 框 ,然后 选择 网 页 文件 所 在 的 路 径 ， 选 中 要 打开 的 文件 ， 
最 后 单 击 “ 打 开 ” 按 钮 。 


记 术 操作 步 双 


(1) 启动 Dreamweaver CC 2018, 执行 “文件 ” |“ 打开” 命令, 弹 出“ 打开” 对话 框 , 如 图 1-40 所 示 。 

(2) 浏览 到 网 页 所 在 的 路 径 ， 在 文件 列表 中 选中 要 打开 的 文件 ， 然 后 单 击 “ 打 开 ” 按 钮 ; 或 者 双击 
所 需 的 文件 ， 即 可 在 Dreamweaver CC 2018 中 打开 指定 的 网 页 ， 如 图 1-41 所 示 。 

在 Dreamweaver CC 2018 中 打开 网 页 之 后 ， 用 户 在 “设计 ”视图 或 “代码 ”视图 中 选中 网 页 上 
的 对 象 ， 对 网 页 上 的 内 容 进行 修改 ， 例 如 替换 图 片 、 编 辑 文本 等 。 具 体 方法 将 在 本 书后 续 章 节 中 进 
行 介绍 。 


打开 已 有 的 网 页 


OD rem ?neub wwwroot he» 


寅 Ci 

WT ' 
= | 
He 


图 1-40 “打开 ”对 话 框 图 1-41 在 Dreamweaver CC 2018 中 打开 网 页 


1.4 设置 页 面 属性 


通常 情况 下 ， 新 建 一 个 网 页 文件 后 ， 其 默认 的 页 面 属性 都 不 符合 设计 需要 。 用 户 通过 设置 文档 的 页 
属性 来 自 定义 页 面 外 观 。 在 Dreamweaver CC 2018 中 ， 网 页 的 属性 通过 “页 面 属性 ”对 话 框 进行 设置 。 
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新 建 或 打开 一 个 网 页 文件 之 后 ,执行 “文件 ”|“ 页 面 属性 ”命令 ,弹出 “页 面 属性 ”对 话 框 ,如 图 1-42 


所 示 。 在 这 里 可 以 设置 页 面 的 字体 、 边 距 、 背 景 、 链 接 、 标 题 /编码 、 跟 踪 图 像 等 属性 。 
EE 


页 本 振作 


图 1-42 “页 面 属 性 ”对 话 框 


1.4.1 设置 页 面 外 观 
在 “页 面 属性 ”对 话 框 的 分 类 列表 中 选择 “外 观 ”( CSS )， 如 图 1-43 所 示 。 
攻 本 | 


图 1-43 设置 页 面 外 岗 


1. 设置 文本 样式 

(1) 字体 和 样式 : 在 “页 面 字体 ” 右 侧 的 第 一 个 下 拉 列 表 框 中 ， 可 以 设置 页 面 使 用 的 字体 组 合 ; 
第 二 个 下 拉 列 表 框 中 设置 字体 样式 ， 如 斜体 、 加 粗 ; 在 第 三 个 下 拉 列 表 框 中 设置 字体 粗细 。 

(2 ) 字号 : 在 “大 小 ”下 拉 列 表 框 中 设置 字体 大 小 和 单位 。 

(3 ) 文本 颜色 : 单 击 “ 文 本 颜色 ” 右 侧 的 拾 色 器 按钮 弹出 调 色 板 ， 如 图 1-44 所 示 。 单 击 选取 饱和 
度 和 亮度 , 然后 拖 动 色相 滑 块 调整 色调 , 拖 动 光亮 度 滑 块 调整 亮度 , 拖 动 Alpha 滑 块 调整 颜色 的 不 透明 度 。 
在 调 色 板 之 外 单 击 ， 即 可 设置 文本 颜色 。 也 可 直接 在 文本 框 中 输入 颜色 的 RGB 值 。 


站 教 你 一 招 : 如 果 要 拾取 Dreamweaver CC 2018 界面 上 任何 位 置 的 颜色 ， 可 以 选中 调 色 板 上 
的 滴 管 按钮 国 ， 然 后 在 需要 取 祥 的 位 置 单 击 。 如 果 要 拾取 Dreamweaver CC 2018 之 外 的 颜色 ， 则 选 
中 滴 管 工具 后 ， 按 下 鼠标 左 键 拖 动 到 需要 取样 的 位 置 ， 然 后 释放 鼠标 
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图 1-44 设置 文本 颜色 


设置 背景 


(1 ) 背景 颜色 : 单 击 “背景 颜色 ” 右 侧 的 拾 色 器 按钮 天， 在 弹出 的 调 色 板 中 选择 需要 的 颜色 。 


( 公 


文件 4 


) 背景 图 像 : 单 击 “ 背 景 图 像 ” 右 侧 的 “浏览 ”按钮 ， 在 弹出 的 对 话 框 中 选择 需要 的 图 像 


默认 情况 下 ， 如 果 选 择 的 图 像 尺寸 比 页 面 的 尺寸 小 ， 则 自动 平 铺 图 像 以 填 满 整 个 页 面 区 域 。 如 果 不 
希望 背景 图 像 自 动 平 铺 ， 可 以 使 用 “重复 ”选项 。 


重复 : 该 选项 为 默认 设置 ， 即 自动 平 铺 ， 如 图 1-45 (a ) 所 示 。 
水 平 重复 : 仅 在 水 平方 向 上 平 铺 ， 如 图 1-45 (b ) 所 示 。 
垂直 重复 : 仅 在 垂直 方向 上 平 铺 ， 如 图 1-45(c ) 所 示 。 
不 重复 : 不 平 铺 ， 默 认 显示 在 页 面 左 上 角 ， 如 图 1-45 ( d) 所 示 。 
S33 3 
— 
(b) (c) 


图 1-45 背 凡 平 铺 效 果 


如 果 背 景 图 像 包含 任何 透明 像素 ， 则 背景 颜色 会 透 过 背景 图 像 显 示 出 来 。 


昌 / 提示 : 如 果 同 时 使 用 背景 图 像 和 背景 颜色 ， 下 载 图 像 时 会 先 显示 颜色 ， 然 后 图 像 覆盖 颜色 。 ] 


3. 


设置 页 边 距 


页 边 距 是 指 页 面 文档 主体 部 分 与 浏览 器 上 、 下 、 左 、 右 边框 的 距离 。 直 接 在 边 距 文本 框 中 输入 需要 
的 边 距 值 和 单位 即 可 。 


看 到 页 面 与 浏览 器 边框 有 空白 。 如 果 要 将 边 距 设 置 为 0， 必须 在 文本 框 中 输入 0。 


i 注意 : 默认 情况 下 ， 页 面 有 边 距 ， 尽 管 在 “页 面 属性 ”对 话 框 中 不 显示 ， 但 在 浏览 器 中 可 以 


此 外 ,在 “外 观 ”(HIML ) 分 类 中 可 以 使 用 HIML 指定 页 面 属性 。 如 果 在 该 分 类 中 指定 页 面 属性 ， 
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属性 面板 上 的 字体 、 大 小 、 颜 色 和 对 齐 方式 控件 将 只 显示 使 用 HTML 标签 的 属性 设置 ， 应 用 于 当前 选择 
的 CSS 属性 值 将 不 可 见 ， 且 “大 小 ”弹出 菜单 也 将 被 禁用 。 因 此 不 建议 使 用 该 分 类 设置 页 面 属性 。 
1.4.2 ”设置 页 面 链接 样式 

在 “页 面 属性 ”对 话 框 的 分 类 列表 中 选择 “链接 ”( CSS )， 如 图 1-46 所 示 。 


图 1-46 设置 链接 样式 


在 “链接 ”( CSS ) 分 类 中 ， 可 以 定义 链接 的 默认 字体 样式 、 大 小 ， 以 及 链接 文本 不 同 状态 下 的 颜色 、 
下 画 线 样式 。 设 置 方法 与 设置 页 面 外 观 的 方法 相同 ， 不 再 袭 述 
链接 字体 : 设置 页 面 超 链接 文本 在 默认 状态 下 的 字体 
大 小 : 设置 超 链接 文本 的 字体 大 小 
链接 颜色 : 设置 网 页 中 的 文本 超 链接 在 默认 状态 下 的 颜色 
变换 图 像 链接 : 设置 在 网 页 中 当 鼠 标 移动 到 超 链接 文字 上 方 时 超 链 接 的 颜色 ， 
已 访问 链接 : 设置 网 页 访问 过 的 文本 超 链接 的 颜色 
活动 链接 : 设置 网 页 中 的 运行 的 文本 超 链接 的 颜色 
下 画 线 样式 : 设置 在 网 页 中 当 鼠 标 移动 到 超 链接 文字 上 方 时 采用 怎样 的 下 画 线 


1.4.3 ”设置 标题 属性 


在 “页 面 属 性 ”对 话 框 的 分 类 列表 中 选择 “标题 ”( CSS )， 如 图 1-47 所 示 


加 加 周章 周 赂 


图 1-47 设置 标题 样式 
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在 “标题 ”( CSS ) 分 类 中 ,用 户 可 以 定义 标题 文字 的 字体 、 样 式 、 颜 色 ， 并 可 分 别 定义 一 级 标题 至 
六 级 标题 使 用 的 字体 大 小 和 颜色 
1.4.4 设置 页 面 标题 和 编码 

在 “页 面 属性 ”对 话 框 的 分 类 列表 中 选择 “标题 ”| “编码 ”"， 如 图 1-48 所 示 。 


图 1-48 设置 “标题 / 编码 ” 


标题 : 在 文本 框 中 输入 的 页 面 标题 将 显示 在 浏览 器 标题 栏 上 。 如 果 不 设置 ， 将 显示 默认 的 “无 标 
9 文档 类 型 : 设置 页 面 代码 使 用 的 HTML 版 本 ， 默 认为 HTML5 

编码 : 设置 网 页 代码 所 用 语言 的 文档 编码 类 型 ， 建 议 初学 者 使 用 默认 设置 

Unicode 标准 化 表单 : 指定 用 于 网 页 编码 类 型 的 Unicode 范式 。 通 常 保留 默认 设置 。 


1.4.5 上 机 练习 一 一 设置 网 页 外 观 


史上 Se 


通过 前 面 对 页 面 属性 设置 方法 的 讲解 ， 结 合 本 节 的 练习 实例 ， 使 读者 更 直观 1-5 上 机 练习 一 一 设置 


地 掌握 设置 网 页 外 观 的 具体 操作 步 又 网 页 外 观 
设计 思路 


首先 新 建 一 个 空白 的 网 页 文件 ， 然 后 打开 “页 面 属 性 ”对 话 框 ， 依 次 设置 页 面 字 体 、 颜 色 、 背 景 颜 
色 和 背景 图 像 , 最 后 设置 链接 文本 的 样式 和 标题 / 编码 。 


记 胡 操作 步骤 


(1 ) 启动 Dreamweaver CC 2018, 执 行 “文件 ” |“ 新建” 命令 ,在 弹出 的 “新 建文 档 ” 对 话 框 中 选择 “新 
建文 档 ” 分 类 ， 文 档 类 型 为 “HTML”, 无 框架 ,然后 单 击 “ 创 建 ”按钮 ， 新 建 一 个 空白 的 网 页 文件 。 

(2 ) 执行 “文件 ”|“ 页 面 属性 ”命令 ， 打开“ 页面 属性 ”对 话 框 。 

(3 ) 在 “外 观 ”( CSS ) 分 类 中 ,设置 页 面 字体 为 默认 字体 ， 且 字体 加 粗 ， 大 小 为 14; 文本 颜色 为 深 
蓝 色 (#0B1A4D ); 背景 颜色 为 浅 绿色 (加 4CDC7 ) ， 背 景 图 像 为 包含 透明 背景 的 GIF 图 像 ， 且 背景 图 像 
“垂直 平 铺 ”; 在 “左边 距 ” 和 “上 边 距 ”文本 框 中 输入 0， 其 他 保留 默认 设置 。 

(4) 切换 到 “链接 ”( CSS ) 分 类 ,设置 链接 文本 的 大 小 为 16， 链接 颜色 为 蓝 色 (#0B10EF ), 已 访 
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问 链接 颜色 为 深 红色 。 
(5 ) 切换 到 “标题 /编码 ”分 类 ,输入 页 面 的 标题 为 “ 鱼 戏 莲 叶 间 ”， 其 他 选项 保留 默认 设置 。 


(6 ) 为 观察 页 面 字体 效果 ， 在 页 面 中 输入 文本 。 选 中 “ 鱼 戏 莲 叶 间 ”， 执 行 “ 窗 口 ”|“ 属 性 ”命令 ， 
打开 属性 面板 ， 在 “链接 ”文本 框 中 输入 “#"。 有 关 链 接 的 设置 将 在 本 书后 续 章 节 中 进行 讲解 。 

(7 ) 执行 “文件 ” |“ 保存 ”命令 ,在 弹出 的 “另存 为 ”对 话 框 中 指定 文件 保存 的 位 置 , 并 输入 文件 名 称 
(例如 lianyehtml )， 单 击 “ 保 在” 按钮 保存 文件 。 

(8 ) 双击 保存 的 网 页 文件 ， 在 浏览 器 中 预览 页 面 效果 ， 如 图 1-49 所 示 。 


图 1-49 页 面 效果 


1.5 答疑 解 惑 


1. 在 Dreamweaver CC 2018 中 如 何 改变 编辑 窗口 的 大 小 ? 

答 : 可 以 通过 Dreamweaver CC 2018 中 的 状态 栏 改 变 编辑 窗口 的 大 小 。 

2. 在 Dreamweaver CC 2018 中 使 用 什么 面板 可 以 修改 几乎 所 有 元 素 的 属性 ? 

答 : 通过 “属性 ”面板 可 以 设置 几乎 所 有 元 素 的 属性 。 

3. 如 何 显示 或 隐藏 标尺 与 网 格 ? 

答 : 在 “设计 ”视图 中 ， 执 行 “查看 ”|“ 设 计 视图 选项 ”|“ 标 尺 ”|“ 显 示 ” 命 令 ， 即 可 在 “设计 ” 
视图 中 显示 标尺 ; 再 执行 一 次 该 命令 ， 即 可 隐藏 标尺 。 

执行 “查看 ”|“ 设 计 视图 选项 ”|“ 网 格 设置 ”|“ 显 示 网 格 ” 命 令 ， 可 显示 或 隐藏 网 格 。 


1.6 “学习 效果 自 测 


一 、 选 择 题 
1. 目前 在 Internet 上 应 用 最 为 广泛 的 服务 是 ( ) 
A. FTP 服务 B.WWW 服务 C. Telnet 服务 D. Gopher 服务 
2. 安装 Dreamweaver CC 2018 的 最 低 内 存 要 求 是 ( )。 
A.2GB B. 256MB C.512MB D. 1GB 
3. 在 Dreamweaver CC 2018 的 “插入 ”面板 上 提供 了 ( ) 个 选项 卡 。 
A.5 B.6 本 D.8 


4. 查找 和 替换 的 快捷 键 是 (  ”)。 
A._CtrHE B. CtrlHHT C. CtrlrS D. CtltL 
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5. 创建 新 文档 的 快捷 键 是 〈 )。 
A.Ctrl B. CtrlHN C. Ctrl+O D. ShiftHN 
二 、 判 断 题 
1. 在 安装 Dreamweaver CC 2018 时 ,必须 将 Dreamweaver CC 2018 安装 到 本 地 磁盘 的 C 盘 中 。( ) 
2. Dreamweaver CC 2018 只 支持 Windows 操作 系统 ， 并 不 支持 苹果 操作 系统 。( 
3. 通过 Dreamweaver CC 2018 中 的 “属性 ”面板 可 以 修改 页 面 中 的 几乎 所 有 元 素 的 属性 。( ) 
三 、 填 空 题 
1. Dreamweaver CC 2018 的 工作 界面 有 ( 闪光 )。 
2. 在 Dreamweaver CC 2018 中 ,文档 窗口 提供 了 三 种 视图 进行 页 面 设计 : ( 并 攻 ) 
3. 在 “代码 ”视图 中 编辑 代码 时 ， 可 以 在 ( ) 和 ( ) 两 种 模式 之 间 进 行 切换 。 
四 、 操 作 题 
1. 安装 Dreamweaver CC 2018。 
2. 认识 Dreamweaver CC 2018 的 界面 组 成 。 


了 解 Dreamweaver CC 义 向 网 页 制作 迈 3 
”出 下 一 步 。 无 论 是 初学 者 还 是 热 练 的 网 页 设计 师 ， 都 要 从 构建 站 点 开 
|” 始 ， 理 清 网 站 结构 的 条 理 。 当 然 ， 网 站 的 结构 不 一 定 都 是 相同 的 ， 功 3 
LE 能 也 不 一 定 相同 ， 一 切 都 要 按照 需求 组 织 站 点 结构 : 


全 创建 本 地 站 点 
全 管理 站 点 
全 管理 站 点 文件 
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2.1 创建 本 地 站 点 
制作 一 个 能 够 被 其 他 人 在 浏览 器 上 浏览 的 网 站 ， 首 先 需要 在 本 地 磁盘 上 制作 这 个 网 站 ， 然 后 将 这 个 


网 站 上 传 到 因特网 的 Web 服务 器 上 。 放 置 在 本 地 磁盘 上 的 网 站 称 为 本 地 站 点 ， 位 于 Web 服务 器 中 的 网 站 
称 为 远程 站 点 。Dreamweaver CC 2018 提供 了 对 本 地 站 点 和 远程 站 点 的 强大 的 管理 功能 。 


2.1.1 建立 站 点 


在 Dreamweaver 中 建立 站 点 很 方便 ， 操 作 步 又 如 下 
(1) 打开 Dreamweaver CC 2018， 执 行 “ 站 点 ”|“ 新 建站 点 ”命令 ， 弹 出 “站 点 设置 对 象 ”对 话 框 ， 
如 图 2-1 所 示 。 


站 点 设置 对 象 未 命名 外 点 2 [| 


图 2-1 “站 点 设置 对 象 ”对 话 框 (1 ) 


(2 ) 在 “站 点 名 称 ” 文 本 框 中 输入 站 点 名 称 ， 并 指定 本 地 站 点 文件 夹 的 路 径 

9 站 点 名 称 : 用 于 设置 新 建站 点 的 名 称 。 该 名 称 仅 供 参考 ， 并 不 显示 在 浏览 器 中 。 

所 本 地 站 点 文件 夹 : 用 于 设置 站 点 在 本 地 计算 机 中 的 存放 路 径 ， 可 以 直接 输入 ， 也 可 以 通过 用 鼠标 
者 针 单 击 右 侧 的 “浏览 文件 夹 ”按钮 贺 ， 打 开 “ 选 择 根 文件 夹 ”对 话 框 ， 从 中 找到 相应 的 文件 来 
后 保存 。 

(3 ) 单 击 “高 级 设置 ”选项 卡 ， 然 后 在 展开 的 子 菜单 中 选择 “本 地 信息 ”， 如 图 2-2 所 示 。 在 这 里 设 

置 站 点 的 默认 图 像 文 件 夹 、 文 档 路 径 的 类 型 和 站 点 地 址 。 

默认 图 像 文 件 夹 : 用 于 设置 本 地 站 点 图 像 文件 的 默认 保存 位 置 。 对 于 比较 复杂 的 网 站 ， 图 片 往 往 
不 只 存放 在 一 个 文件 夹 中 ， 所 以 实用 价值 不 大 。 

和 链接 相对 于 : 用 于 设置 文档 路 径 的 类 型 : 文档 相对 路 径 、 站 点 根 目录 相对 路 径 。 默 认 方 式 为 文档 
相对 路 径 。 

和 Web URL: 用 于 设置 网 站 在 因特网 上 的 网 址 ， 以 便 Dreamweaver CC 2018 对 文档 中 的 绝对 地 址 进 
行 校 验 。 如 果 目 前 没有 申请 域名 ， 可 以 暂时 输入 一 个 容易 记忆 的 名 称 ， 等 将 来 申请 域名 后 ， 再 用 
正确 的 域名 进行 替换 。 
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区 分 大 小 写 的 链接 检查 
er 否 相 匹配 。 
和 启用 缓存 : 


: 选中 此 项 后 ， 对 站 点 中 的 文件 进行 链接 检查 时 ， 等 将 检 
此 选项 用 于 文件 名 区 分 大 小 写 的 UNIX 系统 
创建 本 地 站 点 的 缓存 以 加 快 站 点 中 链接 更 新 的 速度 


查 链接 的 大 小 写 


站 点 设置 对 象 未 命名 站 点 2 


图 2-2 “站 点 设置 对 象 ” 对话 框 (2 ) 
至 此 , 一 个 简单 的 站 点 定义 完成 , 单 击 “ 保 存 ”按钮 , 即 可 完成 站 点 创建 , 并 关闭 对 话 框 。 此 时 ,“ 文 
件 ” 面 板 展开 ， 并 自动 切换 到 上 述 步骤 创建 的 站 点 
如 果 要 创建 动态 网 页 ， 还 需要 测试 服务 器 的 服务 ， 以 便 在 过 和 芷 时 生成 和 显示 动态 内 容 。 测 试 服 
务 器 可 以 是 本 地 计算 机 、 开 发 服务 器 、 中 间 服 务 器 或 生产 服务 器 。 设 置 测试 服务 器 的 步骤 如 下 
) 单 击 “ 服 务 器 ” 类别, 然后 单 击 “ 添 加 新 服务 器 ”按钮 贺 , 如 图 2-3 所 示 。 弹 出 添加 服务 器 的 界面 


如 图 2-4 所 示 


站 点 设置 对 象 未 命名 站点 2 


图 2-3 


“站 点 设置 对 象 ”对 话 框 (3 ) 
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图 2-4 “添加 服务 器 ”对 话 框 


(5 ) 在 “服务 器 名 称 ” 文 本 框 中 输入 服务 器 的 名 称 

(6) 在 “连接 方法 ”弹出 菜单 中 选择 连接 到 服务 器 的 方式 。 

在 通常 情况 下 ， 都 是 先 在 本 地 站 点 中 编辑 网 页 ， 然 后 再 通过 FTP 上 传 到 远程 服务 器 。 在 这 种 情况 下 
应 该 选择 “FTP”"， 如 图 2-4 所 示 。 

在 选择 “FTP” 后 ， 可 以 在 其 下 出 现 的 4 个 文本 框 中 分 别 填写 远程 站 点 的 FTP 地 址 、 远 程 站 点 存放 
在 Web 服务 器 上 的 文件 夹 、FTP 的 用 户 名 和 FTP 的 密码 。 最 后 选中 “保存 ” 复 选 框 即 可 保存 这 些 设 置 ， 
单 击 “ 测 试 ”按钮 可 以 测试 FTP 的 连接 情况 


&) 提示 : FTP 地 址 是 计算 机 系统 的 完整 Internet 名 称 ， 如 ftp.mindspring.com。 因 此 ， 应 输入 
完整 的 地 址 ， 并 且 不 要 附带 其 他 任何 文本 ,特别 是 不 要 在 地 址 前 面 加 上 协议 名 。 如 果 不 知道 FTP 地 
址 ， 可 与 Web 托管 服务 商 联系 。 


有 些 读者 习惯 于 在 本 地 计算 机 上 存储 文件 或 运行 测试 服务 器 ， 或 连接 到 网 络 文件 夹 ， 在 这 种 情况 下 
应 该 选择 “本 地 ”|“ 网 络 ” 选 项 
(7) 在 “服务 器 文件 夹 ”文本 框 中 指定 远程 文件 夹 地 址 。 


昌 几 提示; 如 果 指 定 的 本 地 文件 夹 与 在 运行 Web 服务 器 的 系统 上 为 站 点 文件 创建 的 文件 夹 相 
同 ， 则 不 需要 指定 服务 器 文件 来 。 这 意味 着 该 Web 服务 器 正在 本 地 计算 机 上 运行 。 


(8 ) 在 “Web URL” 文 本 框 中 输入 Web 站 点 的 URL。Dreamweaver CC 2018 使 用 Web URL 创建 站 
点 根 目录 相对 链接 ， 并 在 使 用 链接 检查 器 时 验证 这 些 链接 。 

(9 ) 单 击 “ 高 级 ”按钮 ,切换 到 “高 级 ”选项 卡 。 在 这 一 步 中 ,可 以 设置 站 点 需要 用 到 的 服务 器 技术 ， 
如 图 2-5 所 示 。 


息 / 提示: Dreamweaver CC 2018 默认 自动 将 文件 推送 到 测试 服务 器 以 便 实现 在 实时 视图 中 无 
颖 编辑 动态 文档 。 用 户 通过 取消 选中 “将 文件 自动 推送 到 测试 服务 器 ”禁用 文件 自动 推送 功能 。 
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口 保存 时 自动 
口 自用 文件 取 


图 2-5 设置 服务 器 模型 


(10 ) 单 击 “保存 ”按钮 ， 然 后 在 “服务 器 ”类 别 中 ,通过 单 选 按钮 指定 刚 添加 的 服务 器 为 远程 服务 
器 或 测试 服务 器 ， 如 图 2-6 所 示 


地 和 的 各 世 
Cinetpub/wwwroot/ 地 DO 


图 2-6 设置 服务 器 类 别 


嫩 注意 : 指定 测试 服务 器 时 ， 必 须 在 “基本 ”选项 界面 中 指定 Web URL。Dreamweaver CC 
2018 允许 指定 特定 服务 器 作为 测试 服务 器 或 远程 服务 器 ， 但 不 能 同时 指定 两 者 。 如 果 打 开 一 个 站 
点 或 导入 在 早期 版 本 的 Dreamweaver 中 创建 的 站 点 的 设置 ， 并 指定 某 个 服务 器 同时 作为 测试 服务 
器 和 远程 服务 器 ， 则 系统 会 创建 一 个 重复 的 服务 器 条 目 。 然 后 ， 将 一 个 标记 为 远程 服务 器 (使 用 
_remote 后 级 )， 将 另 一 个 标记 为 测试 服务 器 (使 用 _testing 后 缀 )。 


(11 ) 单 击 对 话 框 中 的 “保存 ”按钮 ， 即 可 关闭 “站 点 设置 对 象 ”对 话 框 。 至 此 ， 站 点 创建 完成 。 此 
时 的 站 点 为 空 站 点 ， 没 有 网 页 。 
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&) 教 你 一 招 : 如 果 本 地 磁盘 上 有 创建 好 的 网 页 ， 也 可 以 将 这 些 现 有 的 网 页 组 织 为 本 地 站 点 打 
开 。 例 如 本 地 计算 机 E:\fashion\ 目录 下 有 一 些 网 页 ， 通 过 在 “站 点 设置 对 象 ” 对 话 框 “站 点 ”类 别 
下 的 “本 地 站 点 文件 夹 ”文本 框 中 填 入 相应 的 根 目 录 信 息 ， 可 以 将 这 些 网 页 生成 一 个 站 点 ,便于 以 
后 统一 管理 。 从 这 里 也 可 以 看 出 站 点 的 概念 与 文档 不 同 。 换 身 话说 ， 站 点 只 是 文档 的 组 织 形式 。 


2.1.2 上 机 练习 


SD 穆 习 日 标 


创建 “美食 天 下 ”网 站 


2.1.1 节 简 要 介绍 了 创建 站 点 的 操作 步 又， 下面 通过 实例 的 讲解 进一步 掌握 。 2-1 上 机 练习 一 一 创建 
建立 本 地 站 点 的 方法 和 注意 事项 “美食 天 下 ”网 站 
设计 思路 


首先 设置 站 点 的 名 称 \ 本 地 站 点 的 文件 夹 和 默认 图 像 文件 夹 ,接着 设置 本 地 站 点 与 服务 器 的 连接 方式 ， 
然后 设置 站 点 使 用 的 服务 器 技术 ， 最 后 添加 测试 服务 器 ， 完 成 本 地 站 点 的 建立 。 


户 轨 操作 步骤 


(1) 打开 Dreamweaver CC 2018， 执 行 “站 点 ”|“ 新 建站 点 ”命令 ， 弹 出 “站 点 设置 对 象 ”对 话 框 ， 
输入 站 点 名 称 " 美 食 天 下 ”; 在 “本 地 站 点 文件 夹 "文本 框 中 输入 站 点 文件 夹 路 径 “G:\food\” ,如 图 2-7 所 示 。 


站 点 设置 对 象 黄 信 天 下 PE 


图 2-7 设置 站 点 名 称 和 文件 夹 


(2 ) 展开 “高 级 设置 ”分 类 ， 选 择 “本 地 信息 ”分 类 ,在 “默认 图 像 文 件 夹 ”文本 框 中 输入 “G: 
food\images\”; 链接 相对 于 “文档 ";“Web URL” 显 示 为 无 网 络 链接 ， 如 图 2-8 所 示 。 

(3 ) 切换 到 “服务 器 ”分 类 ， 单 击 “添加 新 服务 器 ”按钮 圈 ， 在 弹出 的 屏幕 中 输入 服务 器 名 称 
foodServer; 连接 方法 选择 “本 地 /网 络 "; 服务 器 文件 夹 设置 为 G:\food\， 此 时 Web URL 自动 填充 为 
http://localhost/， 如 图 2-9 所 示 。 
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(4) 由 于 本 网 站 将 使 用 ASPNET 制作 动态 网 页 ， 因 此 ， 单 击 “ 高 级 ”按钮 ， 在 “服务 器 模型 ”下 拉 
列表 中 选择 “ASPNET VB”， 其 他 选项 保留 默认 设置 ， 如 图 2-10 所 示 


图 2-8 设置 图 像 文件 夹 和 Web URL 


图 2-9 填写 服务 器 信息 


图 2-10 ”定义 使 用 的 服务 器 技术 


(5 ) 单 击 “ 保 存 ” 按 钮 ,返回 “站 点 设置 对 象 ”对 话 框 ,此 时 在 服务 器 列表 中 可 以 看 到 添加 的 服务 器 ， 
Dreamweaver CC 2018 默认 将 该 服务 器 设置 为 远程 服务 器 , 单 击 “ 测 试 ” 单 选 按钮 ,将 它 设置 为 测试 服务 器 ， 
如 图 2-11 所 示 。 

(6 ) 单 击 “保存 ”按钮 ,关闭 对 话 框 。 “文件 ”面板 将 自动 展开 ,并 切换 到 “美食 天 下 ”站 点 ,如 图 2-12 
所 示 。 

(7) 执行 “站 点 ”|“ 管 理 站 点 ”命令 , 在 打开 的 “管理 站 点 ”对 话 框 中 也 可 以 看 到 新 创建 的 站 点 , 如 
图 2-13 所 示 。 
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图 2-11 设置 服务 器 类 别 


图 2-12 显示 新 创建 的 站 点 图 2-13 “管理 站 点 ”对 话 杠 


2.2 管理 站 点 


在 制作 多 个 网 站 时 ， 需 要 对 各 个 网 站 进行 管理 ， 这 就 需要 使 用 Dreamweaver CC 2018 中 的 专门 的 工 
具 来 完成 站 点 的 切换 、 添 加 、 删 除 、 复 制 、 编 辑 、 导 入 、 导 出 等 操作 
2.2.1 切换 站 点 
在 对 网 站 进行 编辑 或 进行 管理 时 ， 每 次 只 能 操作 一 个 站 点 。 如 果 要 在 多 个 站 点 之 间 进 行 切换 ， 就 要 
到 “文件 ”面板 
执行 “窗口 ” |“ 文件” 命令 ， 即 可 打开 “文件 ”面板 。 在 “文件 ”面板 左上 角 的 下 拉 列表 框 中 选中 
需要 的 站 点 ， 如 图 2-14 所 示 ， 就 可 以 切换 到 对 应 的 站 点 


图 2-14 切换 站 点 
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站 外教 你 一 招 : 在 “管理 站 点 "对 话 框 中 选中 要 切换 到 的 站 点 , 单 击 “ 完 成 "按钮 ,也 可 以 切换 站 点 。 | 


2.2.2 上 机 练习 一 一 编辑 “美食 天 下 ”站 点 喜 


让 


< 练习 目标 间 


本 节 通 过 练习 编辑 “美食 天 下 ”网 站 ， 加 深 读 者 对 切换 站 点 和 编辑 网 站 设置 ”2-2 上 机 练习 一 一 编辑 


的 理解 “美食 天 下 ”站 点 
/设计 思路 

首先 切换 到 “美食 天 下 ”网 站 ， 然 后 修改 该 网 站 的 服务 器 模型 ， 完 成 网 站 的 编辑 操作 
户 胡 操作 步 双 


(1) 执行 “站 点 ”|“ 管 理 站 点 ”命令 ,打开 “管理 站 点 ”对 话 框 
(2) 在 “管理 站 点 ”对 话 框 的 站 点 列表 中 单 击 “ 美 食 天 下 ”"， 切 换 到 需要 编辑 的 站 点 ， 然 后 单 击 “ 编 
辑 当 前 选 定 的 站 点 ”按钮 轿 ， 如 图 2-15 所 示 ， 弹 出 “站 点 设置 对 象 美食 天 下 ”对 话 框 。 


图 2-15 编辑 站 点 


(3 ) 按照 2.1.1 节 的 操作 方法 ， 在 打开 的 站 点 设置 对 象 对 话 框 中 修改 站 点 的 属性 。 本 例 仅 修改 网 站 使 
用 的 服务 器 模型 ， 因 此 单 击 “ 服 务 器 ”分 类 ， 在 服务 器 列表 中 选中 要 修改 的 服务 器 名 称 foodServer， 然 
后 单 击 “ 编 辑 现 有 服务 器 ”按钮 轿 ， 如 图 2-16 所 示 。 


图 2-16 编辑 现 有 服务 器 
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(4) 在 弹出 的 服务 器 信息 设置 界面 , 单 击 “ 高 级 ”按钮 ,然后 在 “服务 器 模型 ”下 拉 列 表 中 选择 “无 ”。 

(5 ) 单 击 “ 保 存 ” 按 钮 关闭 “站 点 设置 对 象 美食 天 下 ”对 话 框 ， 然 后 单 击 “完成 ”按钮 关闭 “管理 
站 点 ”对 话 框 。 

至 此 ， 站 点 编辑 完成 。 


2.2.3 ”添加 站 点 


(1) 执行 “站 点 ”|“ 管 理 站 点 ”命令 ,打开 “管理 站 点 ”对 话 框 。 
(2 ) 在 对 话 框 的 右 下 侧 单 击 “ 新 建站 点 ”按钮 ， 弹 出 如 图 2-17 所 示 的 对 话 框 。 在 对 话 框 中 设置 站 点 
名 称 以 及 站 点 的 存放 目录 位 置 ， 然 后 单 击 保存 。 


站 点 设 轩 对 旬 站 点 2 PE 


图 2-17 添加 站 点 


2.2.4 删除 站 点 


如 果 不 再 需要 某 个 本 地 站 点 ， 可 以 将 其 从 站 点 列表 中 删除 ， 步 又 如 下 。 

(1) 执行 “站 点 ”|“ 管 理 站 点 ”命令 ,打开 “管理 站 点 ”对 话 框 。 

(2 ) 选择 需要 删除 的 站 点 ， 单 击 “ 删 除 当前 选 定 的 站 点 ”按钮 攻 ， 弹 出 一 个 对 话 框 ， 提 示 用 户 本 操 
作 不 能 通过 执行 “编辑 ”|“ 撤 销 ” 命 令 的 办 法 恢复 。 

(3 ) 单 击 “ 是 ”按钮 ， 即 可 删除 选中 站 点 。 


站 提示 : 删除 站 点 实际 上 只 是 删除 了 Dreamweaver CC 2018 与 该 本 地 站 点 之 间 的 关系 。 实 际 
的 本 地 站 点 内 容 ， 包 括 文件 来 和 文档 等 ， 仍 然 保 存在 磁盘 上 相应 的 位 置 。 用 户 可 以 重新 创建 指向 该 
位 置 的 新 站 点 。 


2.2.5 导 人 、 导 出 站 点 
如 果 和 希望 当前 站 点 在 其 他 计算 机 上 也 能 保留 相同 的 设置 ,可 以 将 该 站 点 设置 导出 ,在 今后 需要 时 导入 。 
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1) 执行 “站 点 ”|“ 管 理 站 点 ”命令 , 打开 “管理 站 点 ”对 话 框 。 
(2 ) 选择 要 导出 的 站 点 ， 单 击 “ 导 出 当前 选 定 的 站 点 ”按钮 下， 弹出 “导出 站 点 ”对 话 框 ,文件 名 
将 自动 填充 为 网 站 名 称 ， 保 存 类 型 为 “站 点 定义 文件 ”(* ste )， 如 图 2-18 所 示 。 


hh 有 


Camtasia Studio 


图 2-18 “导出 站 点 ”对 话 框 


(3 ) 设置 文件 保存 位 置 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 导出 站 点 设置 。 
如 果 要 导 人 站 点 设置 ， 在 “管理 站 点 ”对 话 框 中 单 击 “ 导 入 站 点 ”按钮 ， 在 弹出 的 对 话 框 中 选择 要 
导入 的 站 点 定义 文件 后 ， 单 击 “打开 ”按钮 。 


2.3 管理 站 点 文件 


在 Dreamweaver CC 2018 中 ， 站 点 文件 的 管理 主要 是 通过 使 用 “文件 ”面板 实现 的 。 借 助 “ 文 件 ” 
面板 还 可 以 访问 站 点 、 服 务 器 和 本 地 驱动 器 、 显 示 或 传输 文件 。 
2.3.1 认识 “文件 ”面板 
执行 “窗口 ”| ”文件 ”命令 ,打开 “文件 ”面板 。 单 击 “ 文 件 ” 面 板 上 的 “展开 以 显示 本 地 和 远 端 站 点 ” 
按钮 国 ， 展 开 的 “文件 ”面板 的 选项 ， 如 图 2-19 所 示 。 
从 服务 器 获取 文件 
显示 文件 视图 站 点 列表 视图 列表 与 服务 器 同步 


连接 到 服务 器 | 展开 / 折 又 “文件 " 面板 
向 服务 器 上 传 文 件 


图 2-19 展开 的 “文件 ”面板 的 选项 


显示 Git 视 图 


和 9 显示 文件 视图 
这 是 Dreamweaver CC 2018 的 默认 设置 ， 在 “文件 ”面板 中 显示 站 点 的 文件 列表 。 
和 显示 Git 视 图 
切换 到 Git 视图 。 要 在 Dreamweaver 中 使 用 Git, 必 须 先 下 载 Git 客户 端 并 创建 Git 账户 ,然后 在 “站 
点 设置 ”对 话 框 中 将 Dreamweaver 站 点 与 Git 存储 库 相 关联 。 


第 2 章 037 
站 点 构建 与 管理 


Dreamweaver CC 2018 支持 使 用 开源 的 分 布 式 版 本 控制 系统 Git 管理 源 代码 。 用 户 可 以 先 在 任何 
位 置 单独 处 理 代码 ， 然 后 将 更 改 合并 到 Git 中 央 存 储 库 。Git 会 持续 跟踪 文件 中 的 各 项 修改 ， 而 
且 允 许 恢复 到 之 前 的 版 本 。 
9 站 点 列表 
可 以 选择 Dreamweaver CC 2018 站 点 并 显示 该 站 点 中 的 文件 ,还 可 以 访问 本 地 磁盘 上 的 全 部 文件 。 
视图 列表 
使 站 点 视图 在 本 地 视图 、 远 程 服务 器 视图 和 测试 服务 器 视图 之 间 进 行 切 换 。 在 “首选 项 ”|“ 站 点 ” 
i 板 中 可 以 设置 本 地 文件 和 远 端 文件 哪个 视图 在 左 ， 哪 个 视图 在 右 。 
Y 连接 到 服务 器 
用 于 连接 到 服务 器 或 断 开 与 服务 器 的 连接 。 默 认 情 况 下 ， 如 果 Dreamweaver CC 2018 空闲 30 分 
钟 以 上 ， 则 将 断 开 与 服务 器 的 连接 ( 仅 限 FTP )。 若 要 更 改 时 间 限 制 ， 可 以 在 “首选 项 ”| “站 点 ” 
面板 中 进行 设置 。 连 接 到 服务 器 后 ， 该 图 标 显 示 为 回 . 
9 从 服务 器 获取 文件 
用 于 将 选 定 文件 从 服务 器 复制 到 本 地 站 点 。 如 果 该 文件 有 本 地 副本 ， 则 将 其 覆盖 ， 


到 


和 /提示 : 如 果 在 “站 点 设置 对 象 ”对 话 框 中 已 选中 “启用 文件 取出 功能 ”选项 ， 则 本 地 副本 
为 只 读 ， 文件 仍 留 在 远程 站 点 上 ， 可 供 其 他 小 组 成 员 取 出 。 如 果 已 禁用 “启用 文件 取出 功能 "”， 则 
文件 副本 将 具有 读 写 权限 。 


和 向 服务 器 上 传 文件 
将 选 定 的 文件 从 本 地 站 点 复制 到 服务 器 
9 与 服务 器 同步 
同步 本 地 和 远 端 文件 夹 之 间 的 文件 
和 展开 / 折 秋 按钮 
展开 或 折 共 “文件 ”面板 。 


2.3.2 新建、 删除 站 点 文件 


1. 在 本 地 站 点 中 新 建文 件 或 文件 夹 

(1) 执行 “窗口 ”|“ 文 件 ” 命 令 ， 打开“ 文件 ”面板 。 

(2) 在 “文件 ”面板 左上 角 的 下 拉 列 表 中 选择 需要 新 建文 件 或 文件 夹 的 站 点 。 

(3 ) 单 击 “ 文 件 ” 管 理 面板 右上 角 的 选项 按钮 ， 选 择 “ 文 件 ”|“ 新 建文 件 ”或 “新 建文 件 夹 ”命令 
新 建 一 个 文件 或 文件 夹 ， 如 图 2-20 所 示 。 


人 Ctrl+Shift+N 
Cl+Ak+Shift+N 


图 2-20 ”通话 选 项 按钮 打开 菜单 
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或 “新 建文 件 夹 ”命令 。 


&) 教 你 一 招 : 也 可 以 直接 在 站 点 名 称 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “新 建文 件 ” 


(4) 操作 完成 ， 在 站 点 目录 下 将 添加 一 个 网 页 文件 或 文件 夹 。 

2. 从 本 地 文件 列表 面板 中 删除 文件 

(1) 在 “文件 ”面板 左上 角 的 下 拉 列 表 中 选择 需要 删除 文件 或 文件 夹 的 站 点 。 

(2 ) 在 文件 列表 中 选中 要 删除 的 文件 或 文件 夹 。 

(3 ) 按 Delete 键 ， 系统 弹出 一 个 “提示 ”对 话 框 ， 询 问 用 户 是 否 确定 要 删除 文件 或 文件 3 
(4) 单 击 “ 是 ”按钮 ， 即 可 将 文件 或 文件 夹 从 本 地 站 点 中 删除 。 


人 


如 注意 : 与 删除 站 点 的 操作 不 同 ， 这 种 对 文件 或 文件 夹 的 删除 操作 ， 会 从 磁盘 上 真正 删除 相应 
的 文件 或 文件 夹 。 


2.3.3 重 命名 站 点 文件 
(1) 在 “文件 ”面板 左上 角 的 下 拉 列表 选择 需要 重 命名 的 文件 或 文件 夹 所 在 的 站 点 。 
(2 ) 在 文件 列表 中 选中 需要 重 命名 的 文件 或 文件 夹 ， 然 后 单 击 文件 或 文件 夹 的 名 称 ， 使 其 名 称 区 域 
处 于 可 编辑 状态 。 
(3 ) 输入 文件 或 文件 夹 的 新 名 称 , 然 后 单 击 面板 空白 区 域 ,或 按 下 Enter 键 , 即 可 重 命名 文件 或 文件 夹 。 


2.3.4 “上 机 练习 一 添加 网 站 首页 peo 
> 练习 目标 


前 面 简 要 介绍 了 添加 、 重 命名 文件 的 操作 步骤 ， 下 面 通过 在 “美食 天 下 ”网 ”2-3 上 机 练习 一 一 添加 
站 中 添加 网 站 首页 的 讲解 进一步 熟悉 管理 站 点 文件 的 操作 方法 。 网 站 首页 


设计 思路 
首先 添加 一 个 网 页 文件 ， 然 后 将 该 文件 重 命名 为 index.html。 


户 胡 操作 步 队 


(1 ) 启动 Dreamweaver CC 2018， 执 行 “窗口 ”|“ 文 件 ” 命 令 ， 打 开 “ 文 件 ” 面 板 。 

(2) 在 “文件 ”面板 左上 角 的 站 点 列表 中 选择 “美食 天 下 "， 如 图 2-21 所 示 。 

(3 ) 在 文件 列表 中 , 右键 单 击 站 点 名 称 , 在 弹出 的 快捷 菜单 中 选择 “新 建文 件 ” 命 令 , 如 图 2-22 所 示 。 
在 文件 列表 中 即 可 添加 一 个 网 页 文件 ， 且 文件 名 称 处 于 可 编辑 状态 ， 如 图 2-23 所 示 。 


&) 提示 : 如 果 设 置 了 服务 器 模型 ， 则 添加 的 网 页 文件 的 类 型 为 指定 的 服务 器 类 型 ， 例 如 ， 选 
择 了 ASPNET 服务 器 模型 ， 则 添加 的 网 页 文件 默认 为 WebForm.aspx。 如 果 没 有 指定 服务 器 模型 ， 
则 添加 一 个 HTML 文件 untitled.html。 
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图 2-21 选择 要 添加 文件 的 站 点 图 2-22 选择 “新 建文 件 ” 命 令 图 2-23 ”新建 的 文件 


) 输入 文件 的 名 称 index.html， 如 图 2-24 所 示 
2.3.5 移动 、 复 制 站 点 文件 
ee “窗口 ”|“ 文 件 ” 命 令 ， 打 开 “ 文 件 ” 面 板 
) 在 “文件 ”面板 左上 角 的 下 拉 列 表 中 选择 需要 移动 或 复制 的 文件 所 在 的 站 点 
) 如 果 要 进行 移动 操作 ,选择 “编辑 ”|“ 剪 切 ”命令 ; 如 果 要 进行 复制 操作 ,选择 “编辑 ”|“ 复 制 ” 


os. 
4 ) 选中 要 接收 文件 的 文件 来， 执行“ 编辑 ”|“ 粘 贴 ”命令 ， 即 可 将 文件 或 文件 夹 移动 或 复制 到 相 
应 S. 文件 夹 中 
人 使 用 鼠标 拖 动 也 可 以 很 方便 地 实现 文件 或 文件 夹 的 移动 操作 。 方 法 如 下 : 
) 在 “文件 ”面板 中 选中 要 移 3 动 的 文 或 文件 夹 
) 按 下 鼠标 左 键 拖 动 选中 的 文 ， 移 动 到 要 接收 文件 的 文件 夹 上 ， 如 图 2-25 所 示 ， 释 放 
We A 的 文件 或 文件 夹 移 动 到 指定 的 文件 夹 中 


站 点 -美食 天 下 
[J 


图 2-24 修改 文件 名 称 图 2-25 移动 文件 到 文件 夹 


2.4 答疑 解 惑 


1 网 页 与 网 站 的 关系 是 什么 ? 
答 : 网 页 是 网 络 上 的 基本 文档 ， 网 页 中 包 仿 文字、 图片 、 声 音 、 动 画 、 影 像 以 及 链接 等 元 素 ， 通 过 
对 这 些 元 素 的 有 机 组 合 ， 就 构成 了 包含 各 种 信息 的 网 页 。 简 单 地 说 ， 通 过 浏览 器 在 WWW 上 所 看 到 的 和 
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一 个 超 文本 文件 都 是 一 个 网 页 ， 而 通过 超 链 接连 接 在 一 起 的 若干 个 网 页 的 集合 即 构成 网 站 。 

2. 怎样 在 所 有 站 点 操作 中 排除 指定 扩展 名 的 文件 ? 

答 : 编辑 站 点 ,在 “站 点 设置 对 象 ”|“ 高 级 设置 " |“ 遮盖 ”对 话 框 中 选中 “遮盖 具有 以 下 扩展 名 的 文件 ” 
复 选 框 ， 然 后 指定 要 排除 的 文件 扩展 名 。 

3. 什么 是 远 端 站 点 ? 

答 : 远 端 站 点 是 相对 于 本 地 站 点 而 言 的 ， 通 常 将 存储 于 Internet 服务 器 上 的 站 点 称 作 远 端 站 点 。 在 
Intemet 上 浏览 网 页 ， 就 是 用 浏览 器 打开 存储 于 Intemet 服务 器 上 的 HTML 文档 及 其 他 相关 资源 。 既 然 位 
于 Intemet 服务 器 上 的 站 点 仍然 是 以 文件 和 文件 夹 作 为 基本 要 素 的 磁盘 组 织 形 式 ， 那 么 ， 能 不 能 首先 在 本 
地 计算 机 的 磁盘 上 构建 出 整个 网 站 的 框架 ， 编 辑 相应 的 文档 ， 然 后 放置 到 Internet 服务 器 上 呢 ? 答案 是 可 
以 的 ， 这 就 是 本 地 站 点 的 概念 。 


2.5 ”学 习 效果 自 测 


一 、 选 择 题 
1. 下面 ) 项 命令 ， 可 以 打开 “站 点 设置 对 象 ”对 话 框 。 
A.“ 文 件 一 新 建 ”命令 B. 灾 伯 打开 ”命令 
C. “文件 一 保存 ”命令 D.“ 站 点 一 新 建站 点 ”命令 


2. 下 面 说 法 错误 的 是 ( )。 
A. 没有 指定 服务 器 模型 ， 在 “文件 ”面板 中 新 建 的 文件 名 称 默认 为 untitled.html 
B. 在 Dreamweaver CC 2018 中 ， 不 能 调整 本 地 文件 视图 和 远 端 文件 视图 的 位 置 
C. 在 “文件 ”面板 中 删除 文件 ， 会 从 磁盘 上 真正 删除 该 文件 
D. Web URL 用 于 设置 网 站 在 因特网 上 的 网 址 ， 以 便 Dreamweaver CC 2018 对 文档 中 的 绝对 地 址 进 


行 校 验 
3. 下面 ( ) 操作 不 能 在 Dreamweaver CC 2018 的 “文件 ”面板 中 完成 ， 而 必须 在 “管理 站 点 ” 
对 话 框 中 完成 。 
A. 删除 站 点 B. 移动 、 删 除 站 点 文件 
C .文件 重 命名 D. 创建 文件 夹 


4. 在 Dreamweaver CC 2018 中 ， 下 面 关于 定义 站 点 的 说 法 中 错误 的 是 ( i 
A. 首先 定义 新 站 点 ， 打 开 “ 站 点 设置 对 象 ” 对 话 框 
B. 在 “站 点 设置 对 象 ”对 话 框 中 ， 可 以 设置 本 地 网 站 的 保存 路 径 ， 但 不 可 以 设置 图 片 的 保存 路 径 
C. 在 “站 点 设置 对 象 ”对 话 框 的 站 点 名 称 中 填写 网 站 的 名 称 
D. 本 地 站 点 的 定义 比较 简单 ， 基 本 上 选择 好 目录 就 可 以 了 


二 、 判 断 题 

1. 切换 站 点 只 能 在 “管理 站 点 ”对 话 框 中 进行 。( ) 

2. 在 Dreamweaver CC 2018 中 , 只 能 创建 一 个 站 点 , 如 果 需 要 创建 新 的 站 点 , 必须 将 原 有 的 站 点 删除 。 
( ) 

3. Dreamweaver CC 2018 允许 指定 特定 服务 器 作为 测试 服务 器 或 远程 服务 器 ， 但 不 能 同时 指定 两 者 。 
( 

4. 删除 站 点 和 删除 站 点 文件 的 效果 是 一 样 的 。( ) 

5. 本 地 站 点 的 名 称 将 显示 在 浏览 器 中 。( ) 


三 、 填 空 题 

1. 在 “管理 站 点 ”对 话 框 中 ,可 以 对 站 点 进行 〈 )( Dl )( 六 入 人 ) 
等 操作 。 

2. 通常 情况 下 ， 都 是 在 本 地 站 点 中 编辑 网 页 ， 再 上 传 到 远程 服务 器 。 在 这 种 情况 下 ， 连 接 方 式 应 该 
选择 ( )。 

3. 在 Dreamweaver CC 2018 中 定义 站 点 时 ,设置 文档 路 径 的 类 型 有 两 种 ， 分 别 为 )( ) 


四 、 操 作 题 
启动 Dreamweaver CC 2018， 在 本 机 上 建立 一 个 本 地 站 点 。 


四 人 @@@ 国 


文本 是 网 页 中 不 可 续 少 的 东西 ， 文 本 的 格式 化 可 以 充分 体现 文 
所 要 表达 的 重点 ， 比 如 在 页 面 里 制作 一 些 段落 的 格式 ， 在 文档 中 构建 | 
E 丰富 的 全 从 at | 3 


会 在 网 页 中 输入 文本 

会 网 页 中 文本 的 格式 设置 

倒 能 够 在 页 面 中 插入 相关 的 文本 要 素 
E 够 网 页 中 动 文本 和 果 
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编辑 网 页 文本 


3.1 添加 网 页 文本 


网 页 文本 的 典型 文档 类 型 有 ASCII 文本 文件 、RTF 文件 和 Microsoft Office 文档 。Dreamweaver CC 
2018 可 以 从 这 些 文档 类 型 中 的 任何 一 种 获取 文本 ,然后 将 文本 并 入 网 页 中 。 


3.1.1 上 机 练习 一 一 直接 输入 文本 


只 全 


在 Dreamweaver CC 2018 中 输入 文本 的 方法 与 其 他 文字 编辑 软件 类 似 ， 本 节 ”3-1 上 机 练习 一 一 直接 
通过 输入 在 线 问 题 的 练习 ， 使 读者 掌握 在 Dreamweaver CC 2018 中 直接 输入 文本 输入 文本 
的 方法 。 


/设计 思路 
首先 打开 一 个 需要 添加 文本 的 网 页 ， 然 后 在 网 页 中 直接 输入 文本 。 


户 为 操作 步 归 


(1) 打开 文件 。 执 行 “ 文 件 ” | “打开 ”命令 , 在 弹出 的 “打开 ”对 话 框 中 选择 一 个 制作 好 的 页 面 , 如 
图 3-1 所 示 。 

(2 ) 输入 文本 。 删 除 Div 标签 中 的 占 位 文本 ， 然 后 单 击 ， 布 局 块 中 随即 出 现 闪 动 的 指针 ， 表 示 输 入 
文字 的 起 始 位 置 。 选 择 合适 的 输入 法 ， 即 可 在 网 页 中 输入 文字 ， 如 图 3-2 所 示 。 

(3 ) 保存 文件 。 执 行 “ 文 件 ”|“ 保 存 ” 命 令 保存 文件 。 在 浏览 器 中 的 页 面 效 果 如 图 3-3 所 示 。 


南宁 文化 


南宁 别称 绿城 、 凤 凰 城 、 五 象 城 。 旅 游资 源 丰 
富 ， 北 连 桂林 ， 南 接 北海 ， 构 成 了 广西 的 黄金 
旅游 带 。 壮 丽 的 边关 风采 、 浪 漫 的 海 潍 风 貌 、 
迷人 的 异国 情调 ， 星 罗 棋 布 的 灵山 秀水 ， 古 朴 
悠远 的 古迹 故 址 ， 山 、 水 、 人 、 情 构成 南宁 多 
层次 的 旅游 景观 。 


图 3-1 打开 页 面 


图 3-3 页面 效果 


3.1.2 ”从 其 他 文档 中 复制 文本 


如 果 其 他 应 用 程序 中 已 存在 需要 的 文本 ， 可 以 从 其 他 应 用 程序 中 复制 文本 ， 粘 贴 到 Dreamweaver CC 
2018 文档 窗口 中 。 

(1 ) 在 其 他 的 应 用 程序 或 文档 中 复制 文本 ,然后 切换 回 Dreamweaver CC 2018“ 文 档 ” 窗 口 的 “设计 ” 
视图 。 

(2 ) 在 要 放置 文本 的 地 方 单 击 ， 选 择 “ 编 辑 ”|“ 粘 贴 ” 命 令 。 

如 果 执 行 “ 编 辑 ”|“ 选 择 性 粘贴 ”命令 ， 则 会 弹出 “选择 性 粘贴 ”对 话 框 ， 如 图 3-4 所 示 。 

利用 粘贴 选项 ， 可 以 保留 所 有 源 格式 设置 ; 也 可 以 只 粘贴 文本 ， 还 可 以 指定 粘贴 文本 的 方式 。 


044 Breemmmwaevar GE2018 


口 保 留 搞 行 竺 中 
口才 里 Yord 段 车 同 距 0) 
回 将 智能 引号 转换 为 直 引 号 Q) 


和 前 这 基 吉 中) 


图 3-4 “选择 性 粘贴 ”对 话 框 (1) 


四 让 教 你 一 招 : 设置 复制 | 粘贴 首选 项 

执行 “编辑 ”| “首选 项” 命令， 在 弹出 的 “首选 项 ”对 话 框 中 选择 “复制 ”| “粘贴” 分 类 ， 
可 以 设置 使 用 “编辑 ” |“ 粘贴” 命令 从 其 他 应 用 程序 粘贴 文本 到 “设计 ”视图 时 ,默认 的 粘贴 方式 ， 
如 图 3-5 所 示 。 


图 3-5 “选择 性 粘贴 ”对 话 框 (2) 


此 外 ， 也 可 以 从 支持 文本 拖 放 功 能 的 应 用 程序 中 拖 放 文本 到 Dreamweaver CC 2018 的 文档 窗口 。 方 
法 如 下 : 

(1) 在 支持 文本 拖 放 功能 的 应 用 程序 ( 如 Word ) 中 ， 选 中 需要 复制 的 文本 。 

(2 ) 在 选中 的 文本 上 按 下 鼠标 左 键 , 拖 动 到 Dreamweaver CC 2018 的 “设计 ”视图 , 然后 释放 鼠标 左 
键 ， 即 可 插入 复制 的 文本 。 


3.1.3” 导 人 表格 式 数据 
执行 “文件 ”|“ 导 和 人 ”|“ 表 格式 数据 ”命令 ,可 以 导入 XML 和 表格 式 数据 。 有 关 导 入 表格 式 数据 
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的 具体 操作 将 在 第 5 章 详细 讲述 。 
比 外 ，Dreamweaver CC 2018 集成 了 适用 于 设备 的 Extract， 使 用 Extract 浮动 面板 ， 用 户 可 以 将 PSD 


复合 中 的 CSS、 文 本 、 图 像 、 字 体 、 颜 色 、 渐 变 和 度量 值 提取 到 文档 中 。 


3.2 设置 文本 格式 
网 页 中 的 文字 主要 包括 标题 、 信 息 、 文 本 链接 等 几 种 主要 形式 。 良 好 的 文本 格式 ， 能 够 充分 体现 文 
档 要 表述 的 意图 ， 激 发 读者 的 阅读 兴趣 。 在 文档 中 构建 丰富 的 字体 、 多 种 的 段落 格式 以 及 赏心悦目 的 文 
本 效果 ， 是 一 个 专业 网 站 必 不 可 少 的 要 求 之 一 
3.2.1 设置 文本 属性 


文本 的 大 部 分 格式 设置 都 可 以 通过 属性 面板 实现 。 执 行 “ 窗 口 ”| * 属 性” 命令, 即 可 打开 “属性 ”面板 。 
用 鼠标 指针 选中 要 修饰 的 文字 ， 此 时 在 “属性 ”面板 上 显示 的 就 是 当前 文字 的 属性 ， 如 图 3-6 所 示 。 


1. HTML 属性 
1 ) 格式 
在 “属性 ”面板 上 的 “格式 ”下 拉 列 表 中 选择 “段落 ”选项 ， 即 可 以 把 选中 的 文本 设置 成 段落 格 
式 。 段 落 格式 在 Dreamweaver CC 2018 的 设计 视图 中 的 效果 如 图 3-7 所 示 。 在 浏览 器 中 的 效果 如 图 3-8 
所 示 。 
es 专家 在 线 问题 了 


国际 奥 委 会 是 个 怎样 的 组 织 ? 奥林匹克 
运动 的 发 祥 地 在 何 处 ? 


是 淮 ? 奥运 火炬 是 加 
?了 现代 奥林匹克 创 巾 人 是 谁 了 
著名 的 《体育 颌 》 作 者 是 褒 3 国际 奥 
委 会 是 何 时 诞生 的 ?了 


图 3-7 选中 文本 设置 段落 的 效果 图 3-8 段落 在 浏览 器 中 前 效果 


“格式 ”下 拉 列 表 中 的 “标题 1” 到 “标题 6” 分 别 表示 各 级 标题 ， 并 应 用 于 网 页 的 标题 部 分 。 其 对 
应 字体 由 大 到 小 ， 同 时 文字 全 部 加 粗 。 应 用 “标题 3” 的 文本 效果 如 图 3-9 所 示 。 


专家 在 线 问题 更 问题 
国际 秽 雪 会 是 个 怎样 的 
组 织 ? 


奥林匹克 运动 的 发 祥 地 在 何 处 ? 古代 奥 
奥运 火炬 是 如 何 起 源 

奥林匹克 创始 人 是 谁 ?3 著名 
的 《 伟 育 绩 ) 作者 是 淮 ? 国际 奥 委 全 
是 何 时 诞生 的 ? 


图 3-9 设置 “标题 3” 在 设计 视图 和 在 浏览 器 中 的 效果 
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&) 教 你 一 招 : 在 “代码 ”视图 中 ,使 用 “标题 1” 时 ,文字 两 端 使 用 <hl></hl> 标记 ; 使 用 “ 标 
题 2” 时 ,文字 两 端 使 用 <h2></h2> 标记 ， 依 次 类 推 。 手 动 删除 这 些 标记 ， 文 字 的 样式 随即 消失 。 


2) ID 
为 所 选 内 容 分 配 一 个 耳 。 如 果 已 声明 过 卫 ， 则 该 下 拉 列 表 中 将 列 出 文档 的 所 有 未 使 用 的 已 声明 


3 ) 类 

选择 要 应 用 于 当前 所 选 文本 的 样式 。 如 果 没 有 对 所 选 内 容 应 用 过 任何 样式 ， 则 显示 “无 ”。 
和 重 命名 : 修改 当前 选 定 文本 采用 的 样式 的 名 称 

和 附加 样式 表 : 弹出 “使 用 现 有 的 CSS 文件 ”对 话 框 。 


4 ) 链接 
创建 所 选 文本 的 超 文本 链接 。 有 关 链 接 的 设置 方法 ， 将 在 第 6 章 进 行 讲解 。 
5 ) 其 他 属性 


回 : 将 文本 字体 设置 为 粗 体 。 

9 园 : 将 文本 字体 设置 为 斜体 。 

3 国 : 项 目 列表 。 选 择 需要 建立 列表 的 文本 ， 并 单 击 该 按钮 ， 即 可 建立 无 序列 表 。 
9 围 : 编号 列表 ， 用 于 建立 有 序列 表 

3 图 |: 出 除 内 缩 区 块 ， 减 少 文本 右 缩 进 

3 图 : 内 缩 区 块 ， 增 加 文本 右 缩 进 

Y 标题 : 为 超级 链接 指定 文本 工具 提示 , 即 在 浏览 器 中 , 当 鼠 标 移 到 超级 链接 上 时 显示 的 提示 文本 。 
和 目标 : 指定 链接 文件 打开 的 方式 ， 

站 页 面 属性 : 单 击 此 按钮 弹出 “页 面 属性 ”对 话 框 ， 对 页 面 属 性 进行 设置 。 

9 列表 项 目 : 列表 项 的 属性 设置 窗口 。 有 关 设置 将 在 3.3.3 节 讲解 。 

2. CSS 属性 

单 击 “ 属 性 ”面板 上 的 国 几 按钮 ， 即 可 使 用 CSS 规则 格式 化 文本 ， 如 图 3-10 所 示 。 


图 3-10 CSS 规则 属性 


和 目标 规则 : 显示 当前 选中 文本 已 应 用 的 规则 ， 也 可 以 使 用 “目标 规则 ”下 拉 菜 单 中 的 命令 创建 新 
的 内 联 样式 或 将 现 有 类 应 用 于 所 选 文本 。 有 关 CSS 规则 的 创建 和 编辑 ， 将 在 本 书后 续 章 节 中 进 
行 介绍 。 


昌 提示 : 在 创建 CSS 内 联 样式 时 ，Dreamweaver CC 2018 会 将 样式 属性 代码 直接 添加 到 页 面 
的 body 部 分 。 


9 编辑 规则 : 单 击 该 按钮 可 以 打开 目标 规则 的 “CSS 设计 器 ”面板 进行 修改 。 
和 CSS 和 设计 器 : 单 击 该 按钮 可 以 打开 “CSS 设计 器 ”面板 ,并 在 当前 视图 中 显示 目标 规则 的 属性 。 
和 字体 : 设置 目标 规则 的 字体 。 


第 3 章 047 
编辑 网 页 文本 


(以 知识 拓展 
管理 字体 
如 果 字体 列表 中 没有 需要 的 字体 ,可 以 单 击 字体 下 拉 列 表 中 的 “管理 字体 ” 命令 ,在 弹出 的 “管理 字体 ” 
对 话 框 中 的 “ 自 定义 字体 堆栈 ”选项 卡 中 设置 需要 的 字体 列表 ， 如 图 3-11 所 示 。 


全 理 字 估 E> 


本 地 w 由 字体。 自 定义 字体 堆 柜 


图 3-11 “管理 字体 ”对 话 杠 


单 击 转 按 钮 添加 字体 堆栈 ， 然 后 在 “可 用 字体 ”列表 中 选中 需要 的 字体 后 ， 单 击 匡 肌 按钮 ， 即 可 将 
字体 添加 到 字体 列表 中 。 


大 小 : 设置 目标 规则 的 字体 大 小 
3 回 : 人 字体 颜色 


生 注意 :“ 字 体 "“ 大 小 "“ 颜 色 ”“ 字 体 样式 ”“ 字 体 粗细 "“ 对 齐 ”属性 始终 显示 应 用 于 “文档 ” 
窗口 中 当前 所 选 内 容 的 规则 的 属性 。 更 改 其 中 的 任何 属性 ， 将 会 影响 目标 规则 。 


3.2.2 文本 空格 


要 在 文本 中 插入 空格 ， 可 以 直接 按键 盘 上 的 空格 键 
在 Dreamweaver CC 2018 之 前 的 版 本 中 ， 默 认 情 况 下 ， 两 个 字符 之 间 只 能 包含 一 个 空格 ， 即 使 多 次 
按 下 空格 键 也 无 济 于 事 。 
若 要 在 两 个 字符 之 间 添 加 空格 ， 可 以 执行 以 下 操作 之 一 
和 单 击 “HTML” 插 入 面板 中 的 “不 换行 空格 ” 技 外 加 
9 执行 “插入 ”| “HTML”|“ 不 换行 空格 ”命令 
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和 按 Ctrl+ Shift + Space 组 合 键 。 

Y 在 “代码 ”视图 中 需要 插入 空格 的 位 置 输入 “&nbsp;”。 

Dreamweaver CC 2018 默认 允许 输入 多 个 连续 的 空格 ， 用 户 可 以 根据 需要 ， 执 行 “编辑 ”/“ 首 选项 ” 
命令 ,在 “常规 ”分 类 中 取消 选中 “人 允许 多 个 连续 的 空格 ” 复 选 框 ， 禁 用 多 个 连续 空格 。 


3.2.3 ”文本 换行 


在 Dreamweaver CC 2018 中 ,文本 在 一 行 结束 的 时 候 具 有 自动 换行 功能 。 如 果 要 使 文本 强制 换行 ， 
可 以 按键 盘 上 的 Enter 键 或 者 Shift+Enter 快捷 键 来 实现 。 

按 Enter 键 , 换行 的 行距 较 大 , 如 图 3-12 所 示 ; 按 Shift+Enter 快捷 键 , 换行 的 行距 比较 小 , 如 图 3-13 
所 示 。 


加 i 要 会 是 个 40 组织 ? 天 林 区 克 和 1 
1 :发 尾 地 在 何 处? 古代 奥运 会 皮 有 
H ;运动 的 发 祥 地 在 癌 处 3 古代 奥运 会 创 赂 ; ; |: 


: 了 
扑 全 本 全 上 认 是 淮 ? 


二 押运 火炬 是 如何 起 沽 的 ? 现代 和 林 匹 克 : 
:到 赂 人 是 淮 ? 著名 的 《体育 师 》 作者 ; ; |: 
二 温浴 3 国际 奥 委 会 是 何 时 省 生 的 9? 。 :| 


| 测 运 火炬 是 如 何 起 源 的 ? 现代 奥林匹克 
| 荐 赂 人 是 谁 ? 著名 的 《体育 是》 作者 
提 淮 ?国际 央 委 会 是 何 时 庆生 的 ? 。 


图 3-12 ” 按 Enter 键 换行 图 3-13 按 Shift+Enter 键 换行 


在 文档 窗口 中 ， 每 输入 一 段 文 字 ， 按 下 Enter 键 后 ， 就 自动 生成 一 个 段落 。 按 下 Enter 键 的 操作 通常 
被 称 作 “ 硬 回 车 ”"。 如 果 要 在 段落 中 实现 强制 换行 的 同时 不 改变 段落 的 结构 ， 就 要 使 用 “HTML” 插 入 面 
板 中 的 换行 符 圆 ， 或 按 下 Shift + Enter 组 合 键 。 


3.2.4 ”上 机 练习 一 一 美化 网 页 文本 


二 全 上 村 


文本 是 网 页 中 不 可 缺少 的 元 素 ， 丰 富 合 理 的 文本 格式 往往 可 以 起 到 事 半 功 ”3-2 上 机 练习 一 一 美化 


信 的 效果 。 本 练习 将 对 网 页 文本 进行 美化 ， 使 读者 进一步 掌握 格式 化 文本 的 操 网 页 文本 
作 方法 。 
/设计 思路 
首先 打开 一 个 需要 美化 文本 的 网 页 ,然后 选中 需要 设置 格式 的 文本 ,在 “属性 "面板 上 设置 文本 的 标题 


大 小 和 颜色 ， 并 对 文本 进行 换行 ， 便 于 阅读 ， 最 终 效果 如 图 3-14 所 示 。 


ie | 


8 先 认 为 他 太 横 ， Do 
述 蓄 心术 机 和 


多 下 老 这 前面 和 福地 ， 程 兴 人 写 种 污 
oe 译 竺 入 下 来 后 符 要 人 总 
et 


图 3-14 页 面 最 终 效 果 


户 为 操作 步 曙 


(1) 打开 文件 。 执 行 “ 文 件 ” 1“ 打开 ”命令 ,在 弹出 的 “打开 ”对 话 框 中 选择 一 个 已 创建 页 面 布局 的 文 


件 ， 如 图 3-15 所 示 。 
(2 ) 输入 文本 。 删 除 布局 块 中 的 占 位 文本 ， 将 指针 放置 在 布局 块 中 ， 输 


在 每 一 段 文本 的 最 前 面 ， 在 “HTML” 插 入 面板 上 单 击 “ 不 换行 空格 ”两 次 ， 


缩 进 ， 此 时 的 页 面 效 果 如 图 3-17 所 示 。 


上 | 此 赴 明示 训 "We 的 内 容 


i 


上 | An 本 诲 


图 3-15 页 面 布局 图 3-16 插入 “不 换行 空格 ” 图 3-17 
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需要 的 文本 。 将 指针 放置 
如 图 3-16 所 示 。 实 现 首 行 


各 六 外 六 丁 闫 了， 但 是， 只 可 
不 达 主 中 找到 小 J 
二 百年 的 大 审 庆 不 克扣 了 


添加 文本 的 效果 


(3 ) 设置 标题 文本 格式 。 选 中 页 面 上 的 标题 文本 “桃花 心 木 "， 在 “属性 ”面板 上 设置 格式 为 “ 标 
题 1”; 然后 切换 到 CSS 属性 区 域 ， 设 置 字体 为 “华文 行 档 ”， 颜 色 为 外 F6600， 如 图 3-18 所 示 。 此 时 的 


页 面 效 果 如 图 3-19 所 示 。 


图 3-18 设置 标题 文本 格式 


(4) 设置 正文 格式 。 选 中 左 侧 的 正文 文本 ， 在 “属性 ”面板 上 设置 字体 为 


自己 


图 3-19 设置 格式 的 标题 文本 效果 


“新 宋体 "， 大 小 为 14px， 


如 图 3-20 所 示 。 同 样 的 方法 ,设置 右 侧 正文 的 格式 ， 此 时 的 页 面 效果 如 图 3-21 所 示 。 


图 3-20 设置 正文 “属性 ” 


图 3-21 设置 格式 后 前 正文 文本 效果 
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(5 ) 设置 文本 的 行距 。 单 击 文档 工具 栏 上 的 “代码 ”按钮 ， 切 换 到 “代码 ”视图 ， 在 胡 eft 和 大 ight 
的 代码 区 域 添加 如 下 代码 : 
line-height: 140%; 


如 图 3-22 所 示 ， 夫 eft 为 左 侧 的 布局 块 的 规则 定义 ; ight 为 右 侧 的 布局 块 的 规则 定义 。 此 时 的 页 面 
效果 如 图 3-23 所 示 。 


图 3-22 设置 行距 图 3-23 ”页面 效果 


(6) 保存 文件 。 执 行 “ 文 件 ”|“ 保 存 ” 命 令 保 存 文件 , 然 后 在 浏览 器 中 预览 页 面 , 效 果 如 图 3-14 所 示 。 


3.3 ”添加 其 他 文本 要 素 


网 页 中 除了 可 以 插入 文本 ， 还 可 以 插入 一 些 其 他 的 文本 要 素 ， 如 日 期 和 时 间 、 特 殊 字 符 和 水 平 线 。 
本 节 将 简要 介绍 插入 这 些 HIML 对 象 的 方法 。 


3.3.1 插入 日 期 


在 网 页 中 ， 经 常会 看 到 显示 有 日 期 ， 且 日 期 自动 更 新 。 
Dreamweaver CC 2018 为 读者 提供 了 插入 日 期 的 功能 ， 使 用 它 可 以 
多 种 格式 在 文档 中 插入 当前 的 日 期 和 时 间 。 而 且 通 过 设置 ， 可 
以 使 网 页 在 每 次 保存 时 都 能 自动 更 新 。 

(1 ) 将 插入 点 放 在 文档 中 需要 插入 日 期 的 位 置 。 

(2 ) 执行 “窗口 "| “插入 ”命令 ,打开 “插入 ”面板 的 “HTML” 
分 类 ， 单 击 面板 中 的 “日 期 ”按钮 图 ， 弹 出 “插入 日 期 ”对 话 框 ， 
如 图 3-24 所 示 。 

(3 ) 在 “星期 格式 ”“ 日 期 格式 ”“ 时 间 格 式 ” 下 拉 列 表 中 分 
别 选择 星期 、 日 期 、 时 间 的 显示 方式 。 


[ 手 入 网 | 


图 3-24 “插入 日 期 ”对 话 框 


&) 提示 :“ 插 入 日 期 ”对 话 框 中 显示 的 日 期 和 时 间 不 是 当前 日 期 ， 也 不 反映 访问 者 在 查看 站 点 
时 所 看 到 的 日 期 和 时 间 。 它 们 只 是 信息 的 显示 方式 的 示例 。 


(4) 如 果 硕 望 插 入 的 日 期 在 每 次 保存 文档 时 自动 进行 更 新 ， 可 以 选中 “储存 时 自动 更 新 ” 复 选 框 。 
(5 ) 单 击 “ 确 定 ”按钮 关闭 对 话 框 ， 即 可 在 文档 中 插入 日 期 和 时 间 。 
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(6) 选中 插入 的 日 期 ， 在 属性 面板 上 调整 日 期 显示 的 字体 、 大 小 和 对 
齐 方式 。 

例如 , 在 2016 年 11 月 30 日 向 页 面 中 插入 时 间 。 若 在 “星期 格式 ”下 拉 列 
表 框 中 选择 了 “[ 不 要 星期 ]”, 在 “日 期 格式 ” 选 框 中 选择 了 “1974 年 3 月 7 日 ”， 
在 “时 间 格 式 ” 下 拉 列 表 框 中 选择 “[ 不 要 时 间 ]”*"， 则 最 后 生成 的 日 期 效果 如 
图 3-25 所 示 。 


3.3.2 ”插入 特殊 字符 松 家 寻 科 


本 节 所 说 的 特殊 字符 是 指 在 键盘 上 不 能 直接 输入 的 字符 。 如 果 需 要 向 网 页 A 
中 插入 特殊 字符 ， 可 使 用 “插入 ”面板 的 “HTML” 分 类 0 后 生 

(1 ) 单 击 “HTML” 插 和 面板 中 的 “换行 符 ” 按 钮 圆 右 侧 的 向 下 箭头 ,弹出 下 拉 列 表 ,如 图 3-26 所 示 ， 
在 下 拉 菜 单 中 可 以 选择 需要 的 字符 . 

(2 ) 如 果 需 要 插入 更 多 的 特殊 字符 ， 可 以 单 击 下 拉 菜 单 上 的 “其 他 字符 ”按钮 ， 如 图 3-26 所 示 。 弹 
出 “插入 其 他 字符 ”对 话 框 

(3 ) 在 该 对 话 框 中 单 击 需要 的 字符 按钮 ， 如 图 3-27 所 示 。 对 话 框 左上 角 的 “插入 ”文本 框 中 将 显示 
该 字符 对 应 的 实体 参考 。 单 击 “ 确 定 ”按钮 ， 即 可 插入 相应 的 特殊 字符 


水 平 线 
[ml 


图 3-26 ”插入 特殊 字符 图 3-27 “插入 其 他 字符 ”对 话 框 


(以 知识 拓展 
特殊 字符 的 数字 参考 和 实体 参考 

在 HTML 中 ， 一 个 特殊 字符 有 两 种 表达 方式 ， 一 种 称 作 数字 参考 ， 另 一 种 称 作 实体 参考 。 

数字 参考 ,就 是 用 数字 来 表示 文档 中 的 特殊 字符 ,通常 由 前 级 “&#” 加 上 数值 ,再 加 上 后 级 “;” 组 成 ， 
其 表达 方式 为 : &#D;， 其 中 D 是 一 个 十 进 制 数 值 。 

实体 参考 ,就 是 用 有 意义 的 名 称 来 表示 特殊 字符 ,通常 由 前 缀 “&” 加 上 字符 对 应 的 名 称 ,再 加 上 后 缀 “;” 
组 成 。 其 表达 方式 为 : &name;， 其 中 name 是 一 个 用 于 表示 字符 的 名 称 ， 且 区 分 大 小 写 。 

例如 ,可 以 使 用 “&#174;”" 和 “&reg;” 来 表示 注册 商标 符号 “R)”。 尽 管 实体 参考 比 数字 参考 要 容易 记忆 ， 
不 过 ， 并 非 所 有 的 浏览 器 都 能 够 正确 识别 采用 实体 参考 的 特殊 字符 ， 但 是 它们 都 能 够 识别 出 采用 数字 参 
考 的 特殊 字符 。 


051 


052 Breemmweevar 人 人 2018 
车型 权 入 门 与 二 襄 


对 于 那些 常见 的 特殊 字符 ， 使 用 实体 参考 方式 是 安全 的 ， 在 实际 应 用 中 ， 只 要 记 住 这 些 常用 特殊 字 
符 的 实体 参考 就 足够 了 。 对 于 一 些 特别 不 常见 的 字符 ， 则 应 该 使 用 数字 参考 方式 。 
3.3.3 创建 列表 


在 编辑 网 页 文本 时 ， 常 常 需要 对 同 级 或 不 同 级 的 多 个 项 目 进行 编号 或 排列 ， 以 显示 多 个 项 目 之 间 的 
层次 关系 ,或 使 文本 布局 更 有 条 理 ， 这 就 需要 用 到 列表 。 列 表 分 为 项 目 列表 和 编号 列表 两 种 。 


1. 项 目 列表 
项 目 列表 ( 也 称 无 序列 表 )， 列 表 没有 顺序 ， 用 不 同 的 符号 及 缩 进 的 多 少 来 区 分 不 同 的 层次 。 默 认 的 
项 目 符号 是 圆 点 。 


(1) 选中 需要 设置 成 项 目 列表 的 文本 
(2 ) 打开 “属性 ”面板 ,在 HTML 属性 中 单 击 “项 目 列表 ”按钮 国 ， 如 图 3-28 所 示 。 


j(o) 口 背景 颜色 { 


次 本 二 m 时 认 高 (H 日 口 


图 3-28 创建 “项 目 列表 ” 


2. 编号 列表 
编号 列表 ( 也 称 有 序列 表 )， 每 一 项 前 都 会 有 序号 引导 ( 默认 为 数字 )， 通 过 数字 及 缩 进来 区 分 不 同 
的 层次 。 


(1 ) 选中 需要 设置 成 编号 列表 的 文本 
(2 ) 打开 “属性 ”面板 ,在 HTML 属性 中 单 击 “编号 列表 ”按钮 围 ， 如 图 3-29 所 示 . 


图 3-29 创建 “编号 列表 ” 


3. 设置 列表 属性 

如 果 默 认 的 项 目 编号 不 符合 设计 需求 ， 用 户 还 可 以 自 定义 列表 属性 。 

在 Dreamweaver CC 2018 的 “设计 ”视图 中 选中 要 修改 的 列表 ,执行 “编辑 ”|“ 列 表 ”|“ 属 性 ”命令 ， 

弹出 “列表 属性 ”对 话 框 ， 如 图 3-30 所 示 。 在 其 中 可 以 对 列表 进行 更 深入 的 设置 。 

NN “列表 类 型 ”": 用 于 改变 选中 列表 的 列表 类 型 ,有 “项 目 列表 ” “编号 列表 ”“ 目 录 列 表 ” “菜单 列表 ” 
四 个 选项 。 其 中 ,“ 目 录 列 表 ”" “菜单 列表 ”只 在 较 低 版 本 的 浏览 器 中 起 作用 ， 在 目前 通用 的 高 版 
本 浏览 器 中 已 失去 效果 ， 这 里 不 做 介绍 。 

NM “样式 ”: 用 于 设置 列表 中 的 每 行 开头 的 列表 标志 。 列 表 类 型 为 “项 目 列表 ”时 ， 有 三 个 选项 一 一 
“默认 ”“ 项 目 符号 ”“ 正 方形 ”; 列表 类 型 为 “编号 列表 ”时 ,有 六 个 选项 一 “默认 ”“ 数 字 ” “小 
写 罗马 字母 "“ 大 写 罗马 字母 "“ 小 写字 母 "”“ 大 写字 母 "， 如 图 3-31 所 示 。 
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图 3-30 “列表 属性 ”对 话 杠 图 3-31 “项目 编号 样式 
3.3.4 上 机 练习 一 一 制作 李白 诗作 列表 


二 入 习 日 标 回 


本 节 通 过 创建 列表 的 练习 ， 使 读者 掌握 在 Dreamweaver CC 2018 中 创建 项 目 ”3-3 上 机 练习 一 一 制作 
列表 、 编 号 列表 及 幅 套 列表 的 操作 方法 。 李白 诗作 列表 
/设计 思路 

首先 打开 一 个 需要 创建 列表 的 网 页 ， 然 后 选中 要 创建 列表 的 文本 ， 在 属性 面板 上 选择 相应 的 按钮 创 
建 列表 ， 最 后 修改 列表 属性 ， 以 凸显 列表 层次 。 


记忆 操作 步骤 

1. 创建 项 目 列表 

(1) 执行 “文件 ”|“ 打 开 ” 命 令 ， 在 弹出 的 “打开 ”对 话 框 中 选择 一 个 制作 好 的 页 面 ， 该 页 面包 含 
三 列 相同 的 内 容 ， 第 一 列 的 内 容 如 图 3-32( a ) 所 示 。 


地 白文 集 
+t 地 | 
山中 回答 | 
有 | 
乐府 | 学 白文 集 
到 省 蕉 + 可 
山中 间 答 
EE * 军 生 
和 所 
五 人 ， 罗 放 难 
,于 上 曲 
E23] 五 
让 
送 互 人 T 允 = 进 丰 人 下 蜀 
(9) (b) 


图 3-32 ”创建 项 目 列表 


(2 ) 用 鼠标 指针 选中 除 “ 李 白文 集 ” 以 外 的 其 他 项 内 容 ， 单 击 属性 设置 面板 中 的 “项 目 列表 ”按钮 围 ， 
则 所 有 项 目的 左边 都 会 加 入 一 个 “@” 符 号 ,这 样 所 有 项 目 都 被 当 作 项 目 列表 的 第 一 层 ,如 图 3-32 (b ) 所 示 。 

(3 ) 选择 “山中 间 答 ”"”“ 军 行 ” 两 项 ， 单 击 属性 设置 面板 中 的 “ 缩 进 ” 按 钮 图 ,使 它们 向 右 缩 进 ， 
则 这 两 项 左边 的 “@” 符 号 变 成 了 “OO” 符号 ， 表示 它们 在 列表 的 第 二 层 。 同 理 设置 其 他 项 ， 最 终 效果 
如 图 3-32(c) 所 示 。 


丹 


晶 ) 提示 : 如 果 要 取消 文本 缩 进 ， 可 以 选中 要 修改 的 文本 ， 然 后 单 击 属性 面板 上 的 “ 凸 出 ” 按 
包 国 . 
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2. 创建 编号 列表 

(1) 用 鼠标 指针 选中 除 “李白 文集 ” 以 外 的 第 二 列 文本 内 容 , 单 击 属性 设置 面板 中 的 “编号 列表 ” 
按钮 围 ， 则 所 有 项 目 左边 都 会 加 入 数字 ， 这 样 所 有 项 目 都 被 当 作 编 号 列表 的 第 一 层 ， 如 图 3-33 (a ) 
所 示 。 

(2) 选择 “山中 间 管 "”“ 军 行 ” 两 项 ,， 单 击 属性 设置 面板 中 的 “ 缩 进 ”按钮 国 ， 使 它们 向 右 
缩 进 , 则 这 两 项 左边 会 按 顺序 加 入 数字 ,表示 它们 是 列表 的 第 二 层 。 同 理 设置 其 他 项 ,如 图 3-33(b ) 
所 示 。 


3. 项 目 列表 和 编号 列表 混 排 

(1) 用 鼠标 指针 选中 除 “ 李 白文 集 ” 以 外 的 第 三 列 文 本 内 容 ， 单 击 属性 设置 面板 中 的 “编号 列表 ” 
按钮 圈 ， 则 所 有 项 目 左边 都 会 加 入 编号 ， 如 图 3-34 (a ) 所 示 。 

(2 ) 选择 “山中 问答 ”“ 军 行 ”两 项 ， 单 击 属性 设置 面板 中 的 “ 缩 进 ”按钮 围 ， 使 它们 向 右 缩 进 ， 
这 两 项 左边 会 按 顺序 加 入 数字 。 然 后 单 击 属性 面板 中 的 “ 缩 进 ”按钮 圈 . 同 理 设置 其 他 项 ,如 图 3-34(b) 
所 示 。 


| 
| 
| 
| 


了 
| 
| 
1 
| 
| 
| 
| 
| 
| 


图 3-33 ”创建 编号 列表 图 3-34 编号 列表 、 项 目 列表 混 排 


4. 修改 列表 的 编号 样式 

(1) 选中 第 一 列 文本 中 的 第 一 层 列表 ,如 选中 “五 律 ", 执 行 “编辑 ” |“ 列表”|“ 属 性 ”命令 ,打开 “ 列 
表 属性 ”对 话 框 ， 在 “样式 ”下 拉 列 表 中 选择 “正方 形 "， 然 后 单 击 “ 确 定 ”按钮 关闭 对 话 框 。 第 一 层 列 
表 的 项 目 符号 即 被 修改 为 正方 形 ， 如 图 3-35 (a ) 所 示 。 

(2 ) 选中 第 二 列 文本 中 的 第 二 层 列表 , 如 选中 “ 军 行 ", 执行“ 编辑 ”|“ 列 表 ”|“ 属 性 ”命令 ， 
打开 “列表 属性 ”对 话 框 ， 在 “样式 ”下 拉 列 表 中 选择 “大 写字 母 "， 然 后 单 击 “确定 ”按钮 关闭 
对 话 框 。 第 二 层 列 表 前 两 项 的 项 目 符号 即 被 修改 为 大 写字 母 。 同 样 的 方法 修改 第 二 层 的 其 他 列表 项 ， 
如 图 3-35 (b ) 所 示 。 

(3 ) 选中 第 三 列 文本 中 的 第 一 层 列表 ,如 选中 “五 律 ” ,执行 “ 编 辑 ”| “列表 ”|“ 属 性 ”命令 ,打开 “ 列 
表 属 性 ”对 话 框 ， 在 “开始 计数 ”文本 框 中 输入 “4”， 然 后 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 第 一 层 列 表 
将 以 4 开始 列 序 ， 如 图 3-35 (ce ) 所 示 。 


图 3-35 ”修改 属性 后 的 列表 
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3.4 ”实例 精 讲 一 一 制作 简单 的 文本 页 面 


在 实际 中 ， 不 少 类 型 的 栏目 网 页 都 会 拥有 较 多 的 文本 ， 如 新 闻 栏目 、 专 题 栏目 、 故 事 栏 目 等 。 下 面 
通过 一 个 读书 栏目 实例 讲解 文本 页 面 的 制作 方法 。 


设计 思路 

本 实例 是 制作 一 个 读书 栏目 的 页 面 。 先 使 用 表格 布局 制作 出 页 面 的 整体 框架 ， 有 
然后 在 相应 的 单元 格 中 输入 相应 的 图 片 和 文字 内 容 。 选 中 文字 ， 在 “属性 ” 面板。 3 4 实例 精 讨 一 制作 
上 设置 文字 的 相关 属性 ， 并 对 文字 进行 简单 的 排版 ， 最 终 效果 如 图 3.36 所 示 简单 的 六 本 页 面 


假 籽 人 生 不 得 相 更 


假如 信 生 不 留 相遇 ,我 还 是 闭 个 我 ， 偶 未 做 做 梦 , 然 后, 开始 日 复 一 日 
的 其 波 ， 注 没 在 这 喧 堪 的 城市 里 。 

我 不 会 了 解 ， 这 个 世界 还 有 这 样 的 一 个 你 ， 只 有 你 能 止 人 区 味 , 也 只 有 
你 会 让 我 心 酚 。 

候 如 入 生 不 曾 相遇 ， 我 不 会 相信 ， 有 一 种 人 可 以 百 看 不 大 ， 有 一 种 人 一 
认识 就 觉得 温 障 。B#0 不 前 相逢 为何 瑰 府 梦 系 ? 我 又 怎 能 深刻 地 体会 到 什 
之 样 M 远 ,什么 m 近 ， 远 是 距离 ， 近 在 心底 。 

假如 人 生 不 曾 想 轴 ， 不 曾 想 过 会 奏 竺 一 个 远方 的 人 。 我 有 深切 的 愿望 ， 
原 你 快乐 每 一 天 。 淡淡 的 情怀 很 真 ， 淡 次 的 问候 很 纯 ， 湾 资 的 压 仿 很 深 ， 淡 
溃 的 祝福 最 真 , 虽然 一 切 只 能 给 虚幻 中 的 你 。 

假如 人 生 不 曾 相遇 ， 我 不 知道 自己 有 那样 一 个 习惯 ， 收 集 你 的 欢笑 ， 收 
集 你 的 感情 ， 收 集 你 的 一 切 一 切 。 

假如 入 生 不 曾 可 昌 ， 我 不 能 深刻 的 体会 隐 痢 和 忧伤 ， 有 着 莫名 的 古 动 ， 
满 荡 着 热泪 种 眶 的 心情 入 眠 。 

假如 人生 不 惫 相遇 ， 我 不 会 保持 着 一 个 人 的 想 棵 ， 即 快 这 想象 难免 京 真 
无 这 ,但 我 仍然 坚持 著 这 样 的 梦想 - 

候 如 人 生 不 曾 相 遇 ， 我 怎 会 理解 一 个 人 的 孤独 是 那样 洛 心 ， 但 却 可 以 释 
训 自 我 的 入 委 与 无 助 。 含 泪 的 沧桑 ， 无 限 的 国 感 ， 因 为 遇见 了 你 ， 才 会 有 更 
学 的 意义 。 可 为 什么 在 爱 的 时 钼 ， 总 伴 着 滩 淡 的 心 念 ? 

假如 人 生 不 曾 相遇 ， 我 怎么 能 知道 爱情 存在 的 真正 意义 。 必 须 有 缘 才 能 
共 舞 ,珍惜 今天 所 爱 万 能 同步。 不 能 和 你 同 肥 ,也 不 能 与 尔 同 步 。 

假如 入 生 不 曾 想 轴 ， 我 还 是 找 ， 你 依然 是 你 ， 只 是 错过 了 人 和 后 最 纺 丽 的 
冶 遇 。 


建议 党 用 屏幕 分 状 率 1024X 768 及 以 上 的 浏览 器 
兰 心 ?读书 工作 主人 


图 3-36 页面 效果 


缔 制作 重点 

(1) 选中 页 面 上 输入 的 文字 ,在 “属性 ”面板 上 可 设置 相关 的 文字 属性 ， 例 如 字体 大 小 、 颜 
色 等 ， 
(2 ) 在 Dreamweaver CC 2018 中 有 两 种 文字 换行 的 方式 : 一 种 是 通过 按键 盘 上 的 Enter 键 , 插入 一 个 
段落 换行 ; 男 一 种 是 通过 按键 盘 上 的 Shift+Enter 键 ， 插 入 一 个 换行 符 ， 换 到 下 一 行 继续 输出 。 


记 胡 操作 步骤 


1. 设置 页 面 属性 

启动 Dreamweaver CC 2018 ,执行 “文件 ” |“ 新建 ”命令 ,新建 一 个 空白 的 HIML 页 面 ,然后 执行 “ 文 
件 ”|“ 保 在” 命令， 保存 文 件 。 执 行 “文件 ”| “页面 属性 ”命令 ， 弹 出 “页 面 属 性 ”对 话 框 ， 设 置 页 面 
字体 为 “新 宋体 "， 大 小 为 14px; 单 击 “ 浏 览 ” 按 钮 ， 选 择 需要 的 背景 图 像 ， 如 图 3-37 所 示 。 
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图 3-37 设置 “页 面 属性 ”面板 


在 这 里 没有 设置 背景 图 像 的 重复 方式 ， 保 留 默认 设置 ， 即 自动 铺 满 整个 页 面 。 

2. 插入 表格 

执行 “插入 ”|“ 表 格 ”命令 ， 在 弹出 的 “表格 ”对 话 框 中 设置 表格 行 数 为 3， 列 为 2， 表 格 宽度 为 
800 像素 , 边框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 为 0, 如 图 3-38 所 示 。 选 中 刚刚 插入 的 表格 , 在 “属性 ” 
面板 上 设置 “对 齐 ” 属 性 为 “居中 对 齐 ” 


3. 设计 表格 布局 

将 鼠标 指针 移 至 第 1 行 单元 格 中 ,在 “属性 ” 面板 上 设置 “高 ”为 60, 然 后 选中 第 1 行 单元 格 , 单 击 “ 属 
性 ”面板 上 的 “合并 单元 格 ” 按 钮 ， 如 图 3-39 所 示 

同样 的 方法 ， 合 并 第 3 行 单元 格 。 按 住 Ctrl 键 单 击 第 1 行 和 第 3 行 选中 这 两 行 单元 格 ， 在 “属性 ” 
面板 上 设置 水 平 “居中 对 齐 "， 垂 直 “ 居 中 ”， 如 图 3-40 所 示 


图 3-38 “表格 ”对 话 框 图 3-40 ”设置 单元 格 内 容 对 齐 方式 1 


4. 插入 图 像 


将 鼠标 指针 放 在 第 2 行 第 2 列 单元 格 中 ,在 “属性 ”面板 上 设置 水 平 “ 右 对 齐 ”, 垂 直 “ 底 部 " ,如 图 3-41 


Ri 
思 


所 示 。 然 后 执行 “插入 ”|“ 图 像 ”命令 , 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 
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Ph， 选择 需要 的 图 像 文件 ， 


如 图 3-42 所 示 


图 3-41 设置 单元 格 内容 对 齐 方式 2 图 3-42 ”插入 图 像 的 效果 


5. 插入 Div 


将 鼠标 指针 放 在 第 2 行 第 1 列 单元 格 中 ， 执行“ 插入 ”|“Div” 命 令 ， 弹 出 “插入 Div” 对 话 框 ， 设 
置 ID 为 text, 如 图 3-43 所 示 。 单 击 “新 建 CSS 规则 ”按钮 ,在 弹出 的 对 话 框 中 单 击 “确定 " 按钮, 打开“#text 


的 CSS 规则 定义 ”对 话 框 。 


图 3-43 “插入 Div” 对 话 框 


(1 ) 在 “类 型 ”分 类 中 ， 设 置 行 高 ( Line-height ) 为 180%， 如 图 3-44 所 示 


#text 的 CSS 规则 定义 


mily(F): 加 Cambria, Hoefler Tedt Liberation Serif, Times, Times N. 


次 


图 3-44 设置 行 高 


(2) 在 “区 块 ”分 类 中 ,设置 文本 对 齐 方式 ( Text-align ) 为 “ 左 对 齐 ”， 如 


图 3-45 所 示 。 
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图 3-45 设置 文本 对 齐 方式 


(3 ) 在 “ 方 框 ”分 类 中 ,设置 高 度 ( Height ) 为 600px ( 与 右 侧 图 片 高 度 相 同 ), 左 (Left ) 右 (Right ) 
填充 为 10px， 左 、 右 边 距 为 aato， 如 图 3-46 所 示 


图 3-46 设置 方 框 的 高 、 填 充 和 亡 距 


设置 完毕 ， 单 击 “确定 ”按钮 关闭 对 话 框 。 此 时 在 页 面 中 将 显示 插入 的 Div 布局 块 ， 删 除 布局 块 中 
的 占 位 文本 ， 效 果 如 图 3-47 所 示 。 
6. 输入 标题 文本 
将 鼠标 指针 放 在 第 一 行 单元 格 中 ， 输 入 文本 ， 然 后 执行 “插入 ”| “HTML”|“ 水 平 线 ” 命 令 ， 插 入 
-条 水 平 线 ， 如 图 3-48 所 示 


eT 


图 3-47 插入 Div 布局 块 图 3-48 插入 文本 和 水 平 线 


第 3 章 
编辑 网 页 文本 


7. 设置 文本 属性 
选中 输入 的 文本 ， 在 “属性 ”面板 上 的 “格式 ”下 拉 列 表 中 选择 “标题 1”"， 如 图 3-49 所 示 ; 切换 到 


CSS 属性 ,设置 字体 为 “华文 行 楷 ”, 大 小 为 30px, 颜 色 为 丁 F6600, 如 图 3-50 所 示 , 此 时 的 文本 效果 如 图 3-51 
所 示 。 


图 3-49 设置 格式 为 “标题 1” 图 3-50 设置 CSS 属性 


便 姑 人生 不 帝 相 到 


图 3-51 设置 属性 后 的 文本 效果 


8. 输入 正文 文本 

将 鼠标 指针 放 在 第 2 行 第 1 列 的 Div 布局 块 中 ,打开 “HTML" 插 入 面板 , 单 击 “ 不 换行 空格 "按钮 两 次 ， 
如 图 3-52 所 示 。 插 入 两 个 不 换行 空格 ， 然 后 输入 其 他 文本 。 一 段 文 本 输入 完成 后 ， 按 Enter 键 插入 一 个 
换行 符 ， 使 用 同样 的 方法 ， 插 入 其 他 文本 ， 如 图 3-53 所 示 


假如 人 生 不 雪 相 碍 


人 9 于 是 避税 外 但 可以 秋 
,国力 通风 了 你 ,， 才 会 有 于 
0: 作 
并 相间 ， 找 5 汉 衣 入 受信 存在 内 


图 3-52 ”插入 “不 换行 室 格 ” 图 3-53 ”插入 文本 前 效果 
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9. 制作 页 时 

将 鼠标 指针 放 在 第 3 行 单元 格 中 ， 执行“ 插入 ”|“HTML” | “水平线 ”命令 ， 插 入 一 条 水 平 线 ; 按 
Enter 刍 换 行 ， 输 入 第 1 行文 本 ， 然 后 按 Shift+Enter 组 合 键 ， 插 入 一 个 软 回 车 ,输入 第 2 行文 本 。 将 鼠标 
指针 放 在 要 插入 特殊 符号 的 位 置 ， 在 “HTML” 插 和 人 面板 上 单 击 字符 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 注 
册 商 标 ， 如 图 3-54 所 示 ; 同样 的 方法 ， 插 入 版 权 符号 ， 效 果 如 图 3-55 所 示 


建议 使 用 屏 基 分 入 家 1024X 768 及 以 上 的 浏览 器 


;9 读书 工作 宫 o 
图 3-54 ”插入 特殊 字符 图 3-55 ”页 脚 效果 
10. 保存 文件 并 预览 
执行 “文件 ”|“ 保 在” 命令， 保存 页 面 ， 然 后 在 浏览 器 中 预览 整个 页 面 ， 效 果 如 图 3-37 所 示 ， 


3.5 答疑 解 惑 


1. 如 何 查找 和 替换 文本 ? 

答 : 执行 “查找 ”|“ 查 找 和 替换 ”命令 ， 即 可 在 文档 顶部 打开 相应 的 面板 ， 如 图 3-56 所 示 。 

在 “搜索 词 ”文本 框 中 输入 要 查找 的 文本 ,在 “替换 词 ”文本 框 中 输入 要 替换 的 文本 ; 在 “查找 位 置 ” 
下 拉 列 表 中 选择 要 查找 的 范围 ; 在 “筛选 ”区 域 可 以 扩展 或 限制 搜索 范围 ， 单 击 “查找 全 部 ”按钮 ， 即 
可 弹出 一 个 “搜索 ”面板 ， 显 示 查 找 结果 。 单 击 “ 蔡 换 ” 或 “全 部 蔡 换 ”按钮 ， 即 可 完成 操作 ， 


| 


图 3-56 “查找 和 替换 ”对 话 框 


第 3 章 061 
编辑 网 页 文本 


2. 如 何 查 找 文档 中 的 换行 符 ? 

答 ; 在 “搜索 词 ” 文 本 框 中 按 Ctrl + Enter 键 或 Shift + Enter 键 可 以 添加 换行 符 ， 从 而 搜索 回 车 符 。 
执行 此 类 搜索 时 ， 如 果 不 使 用 正则 表达 式 ， 则 取消 选择 “忽略 空格 ”选项 。 此 搜索 专门 查找 回 车 符 ， 而 
不 是 仅 查 找 换行 符 匹 配 项 ， 例 如 ， 它 不 查找 <br> 标签 或 <p> 标签 。 回 车 符 在 “设计 ”视图 中 显示 为 空格 
而 不 是 换行 符 。 


3.6 学 习 效果 自 测 


一 、 选 择 题 
1. 按 ) 组 合 键 可 以 在 文档 中 插入 空格 。 

A.Ctrl+ Shi 全 + Space B.Ctrlt+Space C. Shift+Space D. Alt+Space 
2. 按 ( ) 组 合 键 可 以 在 文档 中 插入 换行 符 。 

A. Ctrl+Space B. Shift+Space C. Shift+Enter D. Ctrl+Enter 


3. 下 列 关于 设置 文本 格式 的 说 法 中 错误 的 是 ( )s 
A. 如 果 同 时 设置 多 个 段落 的 缩 进 和 凸 出 ， 则 需要 先 选中 这 些 段落 
B. 执行 “工具 ”|“HTML”|“ 下 画 线 ” 命 令 可 以 对 选中 文本 添加 下 画 线 
C. 只 有 在 “插入 日 期 ”对 话 框 中 选中 “储存 时 自动 更 新 ”选项 ,才能 保证 对 文档 修改 时 日 期 自动 更 新 
D.“ 插 入 日 期 ”对 话 框 中 显示 的 时 间 是 当前 时 间 
4. 以 下 操作 能 实现 在 Dreamweaver CC 2018 中 连续 键入 空格 的 是 ( 六 
A. 按 住 快捷 键 Ctrl+Shift+Space 
B. 在 “HTML” 插 入 面板 中 单 击 “ 不 换行 空格 ”按钮 
C. 执行“ 插入 ”|“HTML”|“ 不 换行 空格 ”命令 
D. 连续 按 多 个 空格 键 
二 、 判 断 题 
1. Dreamweaver CC 2018 提供 的 编号 列表 的 样式 不 包括 中 文 数字 。( ) 
2. 选择 需要 建立 列表 的 文本 ， 并 单 击 属性 面板 上 的 “项 目 列表 ”按钮 ， 即 可 建立 无 序列 表 。( ) 
3. 在 文档 窗口 中 输入 一 段 文字 , 在 文字 中 间 按 下 Enter 键 后 , 可 以 实现 换行 的 同时 不 改变 段落 的 结构 。 
( ) 
4. 在 文本 的 HTML 属性 面板 上 ， 可 以 设置 文本 的 标题 格式 。( ) 
5. 在 文本 的 属性 面板 上 可 以 设置 页 面 属性 和 文档 标题 。( ) 
三 、 填 空 题 
1. 文本 的 对 齐 方式 通常 有 四 种 : ( 站 Ve ) 和 ( )- 
2. 在 文档 窗口 中 ， 每 按 一 次 ( ) 键 就 会 生成 一 个 段落 。 
3. 在 “插入 其 他 字符 ”对 话 框 中 ,选中 一 个 特殊 字符 之 后 ,在 “插入 "文本 框 中 可 以 看 到 该 字符 的 ( 入 
四 、 操 作 题 
通过 本 章 讲解 的 内 容 制作 一 个 简单 的 文本 页 面 。 


图 像 的 直观 力 是 平面 无 法 比拟 的 ， 图 像 的 应 用 可 以 使 网 页 更 加 生 

， 更 加 吸引 浏览 者 。 恰 当 巧 妙 地 利用 图 像 是 设计 网 页 的 关键 。 

: 本 章 将 从 最 基本 的 操作 入 手 ， 通 过 对 网 页 中 的 图 像 的 插入 和 设置 
的 介绍 ， 使 读者 掌握 基本 的 图 像 网 页 的 制作 方法 


人 9@@ 


全 插入 图 像 

@@ 设置 图 像 属性 

全 编辑 图 像 

全 插入 鼠标 经 过 图 像 和 
全 制作 图 文 并 3 
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4.1 网 页 中 常用 的 图 像 格式 


目前 ， 网 页 上 通常 使 用 的 图 像 格式 主要 有 三 种 : GE 、JPEG 和 PNG。 

和 GIF: Graphics Interchange Format 图 形 交 换 格 式 ), 采 用 LZW 无 损 压 缩 算 法 ,最 多 使 用 256 种 颜色 ， 
最 适合 显示 色调 不 连续 或 具有 大 面积 单一 颜色 的 图 像 ， 例 如 导航 条 、 按 钮 、 图 标 、 徽 标 或 其 他 具 
有 统一 色彩 和 色调 的 图 像 。 

和 JPEG: Joint Photographic Experts Group ( 联合 图 像 专家 组 标准 )， 这 种 格式 的 文件 可 以 包含 数 百 万 
种 颜色 ， 是 用 于 摄影 或 连续 色调 图 像 的 高 级 格式 。 随 着 JPEG 文件 品质 的 提高 ， 文 件 的 大 小 和 下 
载 时 间 也 会 随 之 增加 。 通 常 可 以 通过 压缩 JPEG 文件 , 在 图 像 品质 和 文件 大 小 之 间 达 到 良好 平衡 。 

和 PNG : Portable Network Graphic ( 可 移植 网 络 图 形 )， 这 是 一 种 替代 GIF 格式 的 无 专利 权限 制 的 
格式 ， 它 包括 对 索引 色 、 灰 度 、 真 彩色 图 像 以 及 Alpha 通道 透明 的 支持 。PNG 文件 可 保留 所 有 原 
始 层 、 矢 量 、 颜 色 和 效果 信息 〈 例如 阴影 )， 并 且 在 任何 时 候 所 有 元 素 都 是 完全 可 编辑 的 。 


4.2 图 像 效 果 


在 Dreamweaver CC 2018 中 ， 可 以 直接 插入 图 像 ， 也 可 以 将 图 像 作 为 页 面 的 背景 。 在 插入 图 片 时 ， 
还 能 直接 对 图 片 做 一 些 修改 ， 例 如 为 图 片 添加 超 链接 、 给 图 片 加 上 边框 、 改 变 图 片 的 尺寸 、 在 图 片 周 围 
加 上 空白 区 间 以 及 指定 图 片 对 齐 方式 ; 还 可 以 创建 翻转 图 片 或 图 片 地 图 等 交互 式 图 片 。 


4.2.1 插 人 图 像 


在 Dreamweaver CC 2018 中 插入 图 像 很 方便 。 

(1 ) 将 鼠标 指针 移 至 需要 插 人 图像 的 位 置 ,执行 “插入 ” |“ 图像” 命令, 或 单 击 “ 插 入 ”面板 “HTML” 
分 类 中 的 “Image”( 图 像 ) 按钮 国 ， 如 图 4-1 所 示 。 

(2 ) 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 ， 单 击 需 要 插入 的 图 像 文件 ， 如 图 4-2 所 示 。 


亲 = Ez| 
《 RY | jh < inetpub » wwwroot » tg » images » EZ 万 
BiR ”新 建文 件 冯 兰 ” 团 人 @ 
wx 本 六 全” 六 notes 国 022aw0 国 5200532594559_small 国 bg00 
岂 下 载 辆 0 国 025ayl 国 12502181335345q2ngltz9n 。 回 bg2 
a 加 ol 。 辆 026 国 15200532594462_ small 辆 bgl1l 
[= 辆 028 国 19200532594456_small 同 Bigpic 2010| 
Ce 回 2 辆 30 国 2009729152220578 国 ccjente2 
汪 回 o% 。 司 oazblf 辐 200621610165781394 辆 ow 
河 库 回 %5e ” 国 386 国 2006110208352830929 国 email 
部 PPTV 员 大 国 05 国 500_6Va15133 司 2006110910211437274 同 fol 
国 视 项 回 0%006 。” 画 1104 国 200931311513671877806 加 fo6 
加 图 片 回 oo8 国 1113 国 arrows 同 介 94165858|| 
国文 和 a os 回 8.2008-9-11-14-19-441348 。 国 fish 
路 言 乐 国 15 加 040908frut16 加 8_2008-9-11-14-19-484952 。” 国 gifo09 
国 17 画 39912375 国 baidu_sylogol 辆 gif023 
者 计 关 机 辆 19 国 11264918347936 ”加 be 国 gif035 
FR PT 加 oz22av ”图 1175676641783 。” 国 bg_psycho 辆 gif075 


图 4-1 单 击 “ 图 像 ”按钮 图 42 “选择 图 像 源 文件 ” 对 话 框 


064 


Dreemmweever GE2018 
车站 皮 入 门 于 辐 襄 


3 ) 在 “选择 图 像 源 文件 ”对 话 框 下 方 的 “相对 于 ”下 [sexx 

拉 列 表 中 ,可 以 选择 文件 URL 地 址 的 类 型 。 如 果 选 择 “ 文 档 ” es 
选项 ， 表 示 图 像 地 址 相对 于 当前 文档 ; 如 果 选 择 “站 点 根 目 
录 ” 选 项 ， 表 示 图 像 地 址 相对 于 站 点 根 目 录 。 通 常 保留 默认 
设置 。 

(4) 单 击 “确定 ”按钮 ， 即 可 将 选中 的 图 像 插入 到 页 面 
中 的 相应 位 置 。 

如 果 图 像 在 站 点 外 部 ， 在 保存 文件 时 Dreamweaver CC 
2018 会 弹出 “复制 相关 文件 ”对 话 框 ， 提 醒 用 户 将 图 片 保 图 4-3 “复制 相关 文件 ”对 话 框 
存在 站 点 内 部 ， 如 图 4-3 所 示 。 单 击 “ 复 制 ” 按 钮 ， 即 可 保 
存 图 像 。 

4.2.2 设置 图 像 属 性 

在 网 页 中 插入 图 像 后 ，Dreamweaver CC 2018 会 自动 按照 图 像 的 原始 大 小 显示 ， 这 可 能 与 需要 的 尺 
寸 不 一 致 , 通常 还 要 对 图 像 的 一 些 属性 进行 调整 , 如 大 小 、 位 置 、 对 齐 等 。 这 就 要 通过 图 像 属性 面板 实现 。 

在 Dreamweaver CC 2018 中 选中 一 个 图 像 之 后 ,执行 “窗口 "|“ 属 性 "命令 ,打开 图 像 属性 面板 ,如 图 4-4 
所 示 。 


图 4-4 “属性 ”面板 


“属性 ”面板 左上 角 显示 所 选 图 片 的 缩 略 图 ,并 且 在 缩 略图 的 右 侧 显 示 该 图 像 的 大 小 及 其 他 属性 选项 。 
在 “属性 ”面板 的 左上 角 的 文本 框 中 可 以 为 图 像 定义 名 称 。 

YN ID: 用 来 设置 图 像 的 名 称 ， 主 要 用 于 在 脚本 语言 ( 如 JavaScript 或 VBScript ) 中 引用 。 该 名 称 必 

须 唯 一 。 

和 源 文件 : 设置 图 像 的 路 径 。 

链接 : 设置 图 像 的 超 链接 。 

和 目标 : 设置 超 链接 的 打开 方式 。 
9 类: 用 于 设置 应 用 到 图 像 的 CSS 样式 的 名 称 。 
站 宽 : 用 来 设置 图 像 的 宽度 ， 可 填 和 人 数值 ， 单 位 为 像素 。 
9 单位 为 像素 。 


高 : 用 来 设置 图 像 的 高 度 ， 可 填 和 数值 ， 


晶 / 提示 : 调整 图 片 大 小 后 ,“ 宽 "“ 高 ” 右 侧 会 出 现 两 个 按钮 。 单 击 “ 重 置 为 原始 大 小 ”按钮 
图， 可 以 取消 修改 图 片 尺寸 。 单 击 “提交 图 像 大 小 ”按钮 贺 ， 则 修改 图 片 尺寸 。 
本 书 建议 ， 只 有 在 以 确定 布局 为 目的 时 ， 才 在 Dreamweaver CC 2018 中 以 可 视 的 方式 调整 位 
的 大 小 。 确 定 了 理想 的 图 像 大 小 之 后 ， 应 在 图 像 编辑 应 用 程序 中 编辑 该 文件 。 


9 替换 ; 设置 图 像 的 替代 文本 ， 可 输入 一 段 文字 。 当 图 像 无 法 显示 时 ， 将 显示 这 段 文字 。 

Y 标题: 设置 图 像 的 提示 文本 ， 可 输入 一 段 文字 。 在 浏览 器 中 将 鼠标 指针 移 到 图 像 上 时 ， 将 显示 输 
入 的 文本 。 

和 “地 图 ”及 下 面 的 四 个 按钮 : 用 于 制作 映射 图 的 热点 工具 ， 详 细 内 容 会 在 6.2.2 节 中 介绍 。 

和 原始 : 指定 图 像 的 PNG 或 PSD 格式 的 源 文件 。 
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4.2.3 上 机 练习 一 一 图 文 混 排 a 


< 穆 习 目标 


本 节 通 过 制作 一 个 简单 的 诗 文 混 排 的 页 面 ， 使 读者 掌握 在 页 面 中 插入 图 “4-1 上 机 练习 一 一 图 文 混 排 
像 ， 并 设置 图 像 属性 的 方法 。 


二/ 设计 思路 
首先 新 建 一 个 空白 的 HTML 网 页 ， 然 后 在 网 页 中 插入 图 片 ， 并 设置 图 片 的 属性 ， 最 后 输入 文本 。 最 
终 效果 如 图 4-5 所 示 。 


向 EX Windows Irtermet Erplorer EE 
5 
mm 
i 了 计 工 所 | 本 过 :条 习 和 > 0% > 


图 4-5 ”插入 图 像 与 文本 的 效果 


户 轴 操作 步骤 


(1 ) 执行 “文件 ”| “新建 ”命令 ,弹出 “新 建文 档 ” 对 话 框 。 设 置 文档 类 型 为 HTML ,无 框架 ,如 图 4-6 
所 示 。 单 击 “ 创 建 ”按钮 创建 一 个 空白 的 HIML 文件 。 


新 建文 [ie 


口 使 用 Extract 从 Photoshop 复合 中 构建 页 面 


图 4-6 “新 建文 档 ” 对 话 框 
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(2 ) 单 击 文档 工具 栏 上 的 


“设计 ”按钮 ， 切 换 到 o 
(3 ) 执行 “窗口 ”|“ 属 性 ”命令 ,打开 “属性 ”面板 。 切 换 到 CSS 属性 ， 然 后 单 击 “ 


“设计 ” 视 


图 


钮 国 ， 如 图 4-7 所 示 。 这 样 ， 页 面 中 的 内 容 将 默认 居中 对 齐 。 


图 4-7 设置 页 


(4) 在 “设计 ”视图 空白 处 单 击 ,鼠标 指针 将 在 中 间 位 置 显示 。 
人 ”面板 “HTML” 子 面板 上 的 “图 像 ”按钮 ， 弹 出 “选择 图 像 源 文件 ”对 话 框 。 


面 内 容 的 对 齐 方式 


执行 “插入 "| 


图 像 ” 命令， 


居中 对 齐 ” 按 


或 单 击 “ 插 


(5 ) 在 “选择 图 像 源 文件 ”对 话 框 中 选择 要 插入 的 图 像 ， 如 图 4-8 所 示 。 然 后 单 击 “ 确 定 ”"。 该 图 像 
将 出 现在 文档 中 。 
国 过 1 过硬 文才 总 bp EL [| 
OO" inetpub » wwroot tg» images = 万 
JR ”WE - 瑟 " B® | 
es 机 > 二 
Sao | say Google i oY 
人 第 
Hr wi 入 I 
> icongl icon04 leftbar a 
2 I 
计 2(N} conol ET 
i 
图 4-8 “选择 图 像 源 文 件 ” 对 话 杠 
(6) 将 鼠标 指针 置 于 图 片 右 侧 ， 按 Enter 键 男 起 一 行 ， 输 入“ 黄 乱 楼 ”， 然 后 按 下 Ctrl+Shift 组 合 键 ， 


输入 “作者 : 崔 显 ” 


(7) 将 鼠标 指针 置 于 文本 右 侧 ， 按 Enter 键 另 起 一 行 ， 输 入 诗 《 黄 锥 楼 》 的 文本 ， 按 Ctrl+Shift 


键 进行 分 隔 。 
(8 ) 执行 “文件 ” |“ 保存” 命令 ， 保 存 文 件 。 


4.2.4 ”鼠标 经 过 图 像 


在 浏览 器 中 预览 的 效果 如 图 4-5 所 示 。 


像 切 
所 示 
移 到 
图 


4- 


所 请 鼠标 指针 经 过 图 像 ， 就 是 当 鼠 标 指针 移动 到 图 像 上 , 图 
换 成 男 一 幅 图 像 ; 移 开 鼠标 ， 则 恢复 原来 的 图 像 ， 如 图 4-9 
。 鼠 标 指针 没有 移 到 图 像 上 时 ， 显 示 图 4-9 (a ) 的 图 片 ; 
片上 时 ， 显示 图 4-9 (b ) 的 图 ; 移 开 鼠标 指针 ， 又 显示 
9 (a ) 的 图 片 。 如 果 单 击 图 像 ， 还 可 打开 链接 的 网 页 。 


(b) 
图 49 鼠标 经 这 前、 后 前 图 像 效果 
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辣 注意 : 一 个 鼠标 指针 经 过 图 像 其 实 是 由 两 张 图 片 组 成 的 : 页 面 加 载 时 显示 的 图 像 (第 一 
张 ) 和 鼠标 指针 经 过 时 显示 的 图 像 (第 二 张 )。 这 两 张 图 像 应 具有 相同 的 尺寸 ， 如 果 尺 寸 不 同 ， 
Dreamweaver CC 2018 会 自动 将 第 二 张 图 片 的 尺寸 调整 为 与 第 一 张 图 片 相 同 的 大 小 。 


在 Dreamweaver CC 2018 的 “设计 ”视图 中 ,将 鼠标 指针 置 于 要 插入 鼠标 经 过 图 像 的 位 置 。 执 行 “ 插 
入 ”| "HTML”|“ 鼠 标 经 过 图 像 ”命令 ， 或 单 击 “ 插 入 ”面板 “HTML” 子 面板 上 的 “鼠标 经 过 图 像 ” 
按钮 国 ， 如 图 4-10 所 示 。 弹 出 “插入 鼠标 经 过 图 像 ” 对 话 框 ， 如 图 4-11 所 示 。 


插入 生 标 经 过 医 像 [| 


图 4-10 “鼠标 经 证 图 像 ”按钮 图 4-11 “插入 鼠标 经 这 图 像 ”对 话 杠 


图 像 名 称 : 鼠标 经 过 图 像 的 名 称 。 
原始 图 像 : 第 一 张 图 像 的 路 径 ， 
鼠标 经 过 图 像 : 第 二 张 图 像 的 路 径 
载 鼠 标 经 过 图 像 : 将 图 片 预先 加 载 到 浏览 器 的 缓存 中 ,加快 图 片 的 下 载 速度 
替换 文本 : 鼠标 经 过 图 像 时 显示 的 文本 
按 下 时 ， 前 往 的 URL: 在 浏览 器 中 单 击 鼠 标 经 过 图 像 打 开 的 链接 网 页 


4.2.5 ”上 机 练习 一 一 制作 导航 条 


各 全 3 上 村 


前 面 讲解 了 有 关 图 像 操 作 的 基础 知识 ， 通 过 本 节 练 习 实例 的 制作 ， 进 。 4-2 上 机 练习 一 一 制作 导航 条 
- 步 掌握 在 页 面 中 插入 图 像 和 鼠标 经 过 图 像 的 操作 方法 


设计 思路 
本 练习 实质 上 是 制作 -系列 的 鼠标 经 过 图 像 。 首 先 打开 一 个 制作 好 的 页 面 ， 将 鼠标 指针 移 至 页 面 中 
需要 插入 鼠标 经 过 图 像 的 位 置 ， 设置 “插入 鼠标 经 过 图 像 ” 对 话 框 ， 插 入 相应 的 鼠标 经 过 图 像 。 


记 胡 操作 步 权 


(1 ) 启动 Dreamweaver CC 2018， 执行 “文件 ”|“ 打 开 ” 命 令 ， 打 开 已 设置 背景 图 像 和 表格 的 页 面 ， 
如 图 4-12 所 示 。 

有 关 表 格 的 操作 将 在 第 6 章 进 行 讲解 。 

(2 ) 在 “设计 ”视图 中 ,将 鼠标 指针 置 于 表格 第 1 行 。 执 行 “ 插 入 ”|“HTML” |“ 和 鼠标 经 过 图 像 ” 命令 ， 
弹出 “插入 鼠标 经 过 图 像 ” 对 话 框 (图 4-13 ) 

(3 ) 在 “图 像 名 称 ” 文 本 框 中 输入 鼠标 经 过 图 像 的 名 称 ， 例 如 “Follow Me”。 
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图 4-12 打开 的 网 页 效果 图 4-13 设置 “插入 鼠标 经 过 图 像 ” 对话 框 


(4) 单 击 “ 原 始 图 像 ”文本 框 右 侧 的 “浏览 ”按钮 ， 从 弹出 的 对 话 框 中 选择 所 需 的 第 一 张 图 像 。 

(5 ) 单 击 “鼠标 经 过 图 像 ” 文 本 框 右 侧 的 “浏览 ”按钮 ， 从 弹出 的 对 话 框 中 选择 需要 的 第 二 张 
图 像 。 

(6 ) 保留 “ 预 载 鼠 标 经 过 图 像 ” 复 选 框 的 选中 状态 ， 以 加 快 图 片 的 下 载 速度 

(7) 在 “替换 文本 ”文本 框 中 输入 鼠标 掠 过 图 像 时 显示 的 文本 ,例如 “Follow Me”， 

(8 ) 在 单 击 “ 按 下 时 ， 前 往 的 URL” 文 本 框 中 输入 链接 文件 的 路 径 和 文件 名 ， 表 示 在 浏览 时 单 击 鼠 
标 经 过 图 像 ， 会 打开 链接 的 网 页 。 由 于 还 没有 制作 链接 页 面 ， 因 此 本 例 输入 #， 如 图 4-13 所 示 。 

(9 ) 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 选 中 插入 的 图 像 ,在 属性 面板 上 的 “标题 "文本 框 中 输入 提示 信息 : 
单 击 此 按钮 查看 站 点 地 图 ， 如 图 4-14 所 示 

(10 ) 用 同样 的 方法 在 其 他 三 行 单元 格 中 插入 鼠标 经 过 图 像 ， 并 保存 文件 。 在 实时 视图 中 的 预览 效果 
如 图 4-15 所 示 。 


ua Shopping Cart 


图 4-14 设置 图 像 标题 图 4-15 导航 条 预览 效果 


4.2.6 ”水平线 


在 对 页 面 内 容 分 栏 时 , 常会 使 用 水 平 线 作为 分 界线 , 因此 在 本 书 , 将 水 平 线 作为 图 像 的 一 种 进行 介绍 。 
在 Dreamweaver CC 2018 中 可 以 很 便捷 地 插入 水 平 线 。 

(1) 将 插入 点 放 在 “设计 ”视图 中 需要 添加 水 平 线 的 位 置 。 例 如 图 4-16 中 ,“ 春 日 ”的 上 方 。 

(2 ) 单 击 “ 插 入 ”|“HTML”|“ 水 平 线 ” 命 令 ， 即 可 在 指针 处 插入 一 条 水 平 线 。 

(3 ) 在 属性 面板 中 , 设置 水 平 线 的 宽度 为 600， 高 度 为 10， 水平线 居中 对 齐 , 最 终 效 果 如 图 4-17 
所 示 。 
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现世 感 3 

半 诗 方 壤 一 些 开 

为 有 源头 活水 未 为 有 源 尖 水 打 

E 和 3 = 和 设 秆 格式 后 的 水 于 
等 亲 识 得 村 风 面 人 
万 此 下 红 总 是 堆 等 亲 识 需 寺 风 面 
万 第 干 红 总 是 者 
图 4-16 插入 水 平 线 前 的 效果 图 4-17 插入 水 平 线 后 的 效果 


站 教 你 一 招 : 如 果 要 修改 水 平 线 的 颜色 ， 可 以 先 在 属性 面板 上 设置 水 平 线 的 ID ( 例如 line )， 
然后 使 用 “CSS 设计 器 ”面板 定义 CSS 样式 才 ine， 设置 背景 颜色 。 有 关 CSS 规则 的 定义 将 在 第 8 


章 进行 讲解 。 


4.3 编辑 图 像 


在 网 页 制作 过 程 中 ， 可 能 常常 需要 编辑 网 页 中 的 图 像 ， 以 满足 特定 的 设计 需要 。4.2.2 节 已 介绍 了 常 
用 的 图 像 属性 ， 本 节 将 重点 介绍 图 像 “ 属 性 ”面板 中 的 一 些 编辑 属性 ， 如 图 4-18 所 示 。 


图 4-18 图像 的 “属性 ”面板 


4.3.1 编辑 属性 


Y 图 : 用 于 打开 在 “外 部 编辑 器 ”首选 参数 中 指定 的 图 像 处 理 软件 ， 编 辑 当前 选中 的 图 像 。 如 果 没 
有 设置 编辑 软件 ， 将 弹出 一 个 如 图 4-19 所 示 的 对 话 框 ， 提 示 用 户 找 不 到 此 文件 扩展 名 对 应 的 有 
效 编辑 器 。 单 击 “ 确 定 ” 按 钮 ， 将 打开 “首选 项 ”对 话 框 便于 用 户 设置 图 像 编 辑 器 。 有 关 设 置 
外 部 图 像 编辑 器 的 具体 操作 ， 请 参见 下 一 节 的 介绍 。 

9 图 : 编辑 图 像 设 置 。 单 击 该 按钮 打开 “图 像 优 化 ”对 话 框 ， 优 化 图 像 ， 如 图 4-20 所 示 。 


图 4-19 提示 对 话 框 图 4-20 “图 像 优 化 ”对 话 框 
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3 国 : 从 原始 更 新 。 如 果 对 原始 图 像 文件 进行 了 修改 ， 当 前 页 面 上 的 图 像 与 原始 图 像 不 同步 ， 单 击 
该 按钮 ， 图 像 将 自动 更 新 ， 以 反映 对 原始 图 像 所 做 的 任何 更 改 。 

9 国 : 用 于 修剪 图 片 ， 删 去 图 片 中 不 需要 的 部 分 。 

Y 国 : 重新 取样 ， 调 整 图 片 大 小 后 此 按钮 可 用 。 增 加 或 减少 像素 以 提高 调整 大 小 后 的 图 片 质量 。 

3 加: 用 于 改变 图 片 亮 度 和 对 比 度 。 该 操作 将 永久 性 改变 所 选 图 像 。 

3 贺 : 锐 化 图 像 ， 用 于 改变 图 片 内 部 边缘 对 比 度 。 该 操作 将 永久 性 改变 所 选 图 像 。 


4.3.2 ”上 机 练习 一 一 使 用 外 部 编辑 器 修改 图 像 


< 练习 晶 标 


使 用 Dreamweaver CC 2018 的 “首选 项 ”对 话 框 指定 首选 图 像 编辑 器 ， 4-3 上 机 练习 一 一 使 用 外 


并 使 用 指定 的 外 部 编辑 器 修改 网 页 图 像 ， 提 高 整个 工作 过 程 的 效率 部 编辑 器 修改 图 像 
/设计 思路 


首先 打开 Dreamweaver CC 2018 的 “首选 项 ”对 话 框 ， 设 置 指定 图 像 格式 的 主要 编辑 器 。 然 后 选中 
网 页 中 要 修改 的 图 像 ， 使 用 “编辑 ”按钮 打开 外 部 编辑 器 对 图 像 进行 修改 ， 编 辑 完 成 后 ， 单 击 “完成 
按钮 更 新 网 页 上 的 图 像 


户 为 操作 步 对 


(1 ) 启动 Dreamweaver CC 2018, 执行 “编辑 ”|“ 首 选项 ”命令 , 打开 “首选 项 ”对 话 框 , 在 “分 类 ” 
列表 框 中 单 击 “ 文 件 类 型 / 编辑 器 "， 如 图 4-21 所 示 


站 页 基本 


图 4-21 设置 外 部 编辑 器 首选 项 


(2) 在 “扩展 名 ”列表 中 ， 选 择 要 设置 编辑 器 的 文件 类 型 后 级 名 ( 例如 jpg )。 
如 果 在 “扩展 名 ”列表 中 没有 找到 需要 的 后 级 名 ， 可 以 单 击 列表 顶部 的 国 按 钮 ， 然 后 在 “扩展 名 ” 
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列表 中 出 现 的 空 栏 中 输入 所 需 的 后 级 ， 按 Enter 键 即 可 ， 如 图 4-22 所 示 。 


图 4-22 添加 “扩展 名 ” 


“编辑 器 ”列表 上 方 的 国 按 钮 ， 弹 出 “选择 外 部 编辑 器 ”对 话 框 ， 从 中 浏览 选择 所 需 的 外 
习 选 择 Fireworks。 
(4) 选中 添加 的 编辑 器 ， 


单 市 二 到 扩 钮 ， 可 将 所 选编 辑 器 设置 为 指定 类 型 图 像 的 首选 编辑 器 。 


(5 ) 单 击 “确定 ”按钮 关闭 对 话 框 。 此 时 ， 属 性 面板 上 的 “编辑 ”按钮 将 显示 为 指定 的 编辑 器 图 


标 园 . 


&) 提示 : 如 果 指 定 Photoshop 为 主要 编辑 器 ， 则 “编辑 ”按钮 会 变 成 Photoshop 的 按钮 。 


接 下 来 在 Dreamweaver CC 2018 窗口 中 启动 指定 的 图 像 编辑 器 编辑 卫 G 图像 。 
(6) 在 Dreamweaver CC 2018 的 文档 窗口 中 选择 需要 编辑 的 图 像 文 件 ,然后 单 击 属性 面板 中 的 “编辑 ” 
按钮 ， 即 可 启动 指定 的 编辑 器 Fireworks。 


如 果 在 “属性 ”面板 上 


的 “原始 ”文本 框 中 指定 了 网 页 图 像 的 源 文 件 ，Fireworks 会 自动 打开 该 图 像 


的 源 文件 进行 编辑 。 如 果 没有 指定 ， 则 会 弹出 如 图 4-23 所 示 的 “查找 源 ” 对 话 框 询问 是 否 编辑 源 文件 。 


(7) 单 击 “ 使 
在 Fireworks 的 图 像 编 
编辑 的 。 
(8) 在 
可 以 直接 切换 回 Dreamweaver CC 2018。 
与 此 同 


编辑 40908futoljpg。 
千 Freworts PNG 作为 D30908fruitD1.jpg* 的 源 文件 还 是 直接 编 


读本 他 文件 ? 使 用 此 文件 


要 设置 首先 参数 以 备 桂 未 使 用 ， 请 选择 下 面 的 操作 。 


Freworks 源 文件 : 
ET 


| 


图 4-23 “查找 源 ” 对 话 框 


日 此 文件 ”按钮 ， 即 可 在 Fireworks 中 打开 指定 的 图 像 文件 ， 如 图 4-24 所 示 。 


ss 


辑 窗口 上 方 显示 此 图 像 是 从 Dreamweaver CC 2018 转 到 Fireworks 中 进行 


Fireworks 中 修改 图 像 的 色相 ， 然 后 单 击 图 像 编 辑 窗口 上 方 的 “完成 ”按钮 ， 如 图 4-25 所 示 ， 


寺 ，Dreamweaver CC 2018 中 的 图 像 也 会 被 更 新 。 如 果 在 开始 时 选择 了 该 图 像 的 源 文件 ， 则 


对 源 文件 的 修改 将 被 保存 下 来 。 
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Dreamweayer 


my 1 iy of s00x600 [25% 。 
图 4-24 使 用 Fireworks 编辑 图 4-25 单 击 “ 完 成 ”按钮 


4.4 ”实例 精 讲 一 一 制作 饮料 宣传 页 面 


二 生 习 目标 


通过 前 面 对 基础 知识 的 讲解 ， 结 合 本 节 实 例 掌握 在 网 页 中 运用 图 像 的 方法 。 ”4-4 实例 精 讲 一 一 制作 


饮料 宣传 页 面 
设计 思路 
本 实例 是 制作 一 个 饮料 宣传 页 面 。 首 先 使 用 表格 设计 页 面 布局 ， 然 后 在 各 单元 格 中 插入 相应 的 图 像 
定义 CSS 规则 应 用 背景 图 像 。 最 终 的 页 面 效 果 如 图 4-26 所 示 ， 将 鼠标 指针 移 到 导航 图 片上 时 ， 导 航 文 本 
将 显示 不 同 的 颜色 。 


总 制作 重点 


(1 ) 通过 表格 设计 页 面 布局 ， 并 为 单元 格 设置 相应 的 宽度 和 高 度 ， 再 插入 图 像 。 
(2 ) 通过 定义 CSS 规则 将 图 像 作为 单元 格 的 背景 图 像 ， 然 后 在 单元 格 中 插入 图 像 或 其 他 页 面 元 素 。 


到 操作 步 取 


1. 打开 文 件 
启动 Dreamweaver CC 2018， 执 行 “ 文 件 ”|“ 打 开 ” 命 令 ， 在 弹出 的 对 话 框 中 选择 一 个 已 创建 页 面 
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布局 的 网 页 文件 ， 如 图 4-27 所 示 。 然 后 执行 “文件 ”| “另存 为 ”命令 ， 保 存 文件 。 

从 图 4-27 可 以 看 出 ,本 实例 使 用 表格 设计 页 面 布局 ,将 一 个 6 行 7 列 的 表格 通过 合并 ,创建 页 面 的 结构 。 
有 关 表格 的 操作 ， 请 参见 第 5 章 的 介绍 。 

2. 插入 图 像 1 

将 鼠标 指针 放 在 第 1 行 单元 格 中 ， 执 行 “ 插 入 ”| “图像 ” 命 令 ， 在 弹出 的 “选择 图 像 源 文件 ”对 话 
框 中 选择 需要 的 图 像 文件 后 ， 单 击 “确定 ”按钮 即 可 在 指定 位 置 插 和 图像 ， 如 图 4-28 所 示 。 

3. 插入 图 像 2 

将 鼠标 指针 放 在 左 侧 的 单元 格 中 ， 执 行 “ 插 入 ”| “图像 ”命令 ， 插 入 图像 文 件 ， 如 图 4-29 所 示 。 


图 4-27 页 面 布局 图 4-28 插入 图 像 1 图 4-29 插入 图 像 2 


4. 定义 单元 格 背景 图 像 1 

将 鼠标 指针 放 在 第 2 行 第 2 列 的 单元 格 中 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “CSS 样式 |“ 新 
建 " 命令 ,如 图 4-30 所 示 。 在 弹出 的 “新 建 CSS 规则 ”对 话 框 中 输入 选择 器 名 称 .tdbg01 ( 名 称 以 点 开头 )， 
规则 定义 的 位 置 为 “ 仅 限 该 文档 ”"， 如 图 4-31 所 示 。 单 击 “ 确 定 ” 按 钮 , 打开 “.tdbg01 的 CSS 规则 定义 ” 
对 话 框 。 


车 贴 (P) CarlHV 


图 4-30 “新 建 ”菜单 图 4-31 “新 建 CSS 规则 ”对 话 框 


在 “背景 ”分 类 中 单 击 “浏览 ”按钮 ， 选 择 需要 的 背景 图 像 。 

设置 背景 图 像 重 复方 式 为 “no-repeat”( 不 重复 )。 

背景 的 位 置 Background-positon(X) ( 水平 ) 为 “left”( 左 )，Background-positon(Y) ( 垂直 ) 为 “top” 
(顶部 )， 如 图 4-32 所 示 。 
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.tdbg01 的 CSS 规则 定义 ee 


图 4-32 “.tdbg01 的 CSS 规则 定义 ”对 话 框 


5. 应 用 CSS 规则 
将 鼠标 指针 放 在 第 2 行 第 2 列 的 单元 格 中 ,在 “属性 ”面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 .tdbg01， 
单元 格 宽 为 216， 高 为 92， 如 图 4-33 所 示 。 此 时 的 页 面 效 果 如 图 4-34 所 示 


tdbg01 


图 4-33 设置 单元 格 属 性 图 4-34 设置 单元 格 背 四 图 像 效 果 


6. 插入 图 像 3 

将 鼠标 指针 放 在 第 3 行 第 2 列 的 单元 格 中 ， 执行“ 插入 ”|“ 图 像 ”命令 ， 在 单元 格 中 插入 图 像 。 同 
样 的 方法 ， 在 第 5 行 第 2 列 和 第 5 行 第 6 列 的 图 像 ， 如 图 4-35 所 示 。 

7. 定义 单元 格 背 景 图 像 2 

将 鼠标 指针 放 在 第 4 行 第 3 列 单元 格 中 ， 在 “属性 ”面板 上 设置 “高 ”为 33。 然 后 按照 第 4 步 的 方 
法 定义 规则 .tdbg02， 按 照 第 5 步 的 方法 应 用 规则 ， 并 插入 图 像 ， 效 果 如 图 4-36 所 示 。 


: 


图 4-35 插入 图 像 3 图 4-36 证 又 单元 格 背 凡 图 像 并 插入 图 像 效果 


8. 插入 图 像 4 


将 鼠标 指针 放 在 第 5 行 第 3 列 单元 格 中 , 执行 “插入 ”|“ 图 像 ”命令 , 在 指定 的 单元 格 中 插入 图 像 ; 
同样 的 方法 ， 在 第 5 行 第 5 列 单元 格 中 插入 图像， 效果 如 图 4-37 所 示 。 
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9. 定义 单元 格 背 景 图 像 3 
将 鼠标 指针 放 在 第 5 行 第 4 列 单元 格 中 ,在 “属性 ”面板 上 设置 “高 ”为 281。 然 后 按照 第 4 步 的 
方法 定义 规则 .tdbg03， 按 照 第 5 步 的 方法 应 用 规则 ， 效 果 如 图 4-38 所 示 。 


| 


图 4-37 插入 图 像 4 图 4-38 ”定义 单元 格 背 中 图 像 效 果 


10. 插入 图 像 5 


将 鼠标 指针 放 在 剩余 的 单元 格 中 ， 执 行 “ 插 入 ”| “图像 ” 命 令 ， 在 指定 的 单元 格 中 插入 图 像 ， 效 果 
如 图 4-39 所 示 。 


图 4-39 插入 图 像 5 


11. 谋 套 表格 


将 鼠标 指针 放 在 第 5 行 第 4 列 单元 格 中 ， 执行“ 插入 ”|“ 表 格 ”命令 ， 在 弹出 的 “表格 ”对 话 框 中 
设置 行 数 为 6， 列 为 1， 表格 宽度 为 100%， 边 框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 为 0， 如 图 4-40 所 示 。 
单 击 “ 确 定 ”按钮 ， 此 时 的 页 面 效 果 如 图 4-41 所 示 。 


Table 本 


图 4-40 “表格 ”对 话 框 图 4-41 插入 的 表格 


该 表格 用 于 放置 导航 图 像 。 
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12. 插入 导航 图 片 

将 鼠标 指针 放 在 表格 的 第 1 行 单元 格 中 , 执行 “插入 ”| “HIML”|“ 鼠 标 经 过 图 像 ”命令 , 弹出 “ 插 
和 人 鼠标 经 过 图 像 ”对 话 框 。 

和 9 图 像 名 称 : 本 例 输入 about。 读 者 也 可 以 输入 喜欢 的 名 称 ,但 一 定 不 要 与 其 他 导航 图 片 的 名 称 重 复 。 

原始 图 像 和 鼠标 经 过 图 像 : 单 击 “ 浏 览 ”按钮 ， 在 弹出 的 对 话 框 中 选择 需要 的 图 像 文 件 。 

和 蔡 换文 本 : 本 例 输入 “关于 我 们 ”。 

和 按 下 时 前 往 的 URL: 本 例 没 有 制作 链接 页 面 ， 因 此 输入 #， 如 图 4-42 所 示 。 


插入 鼠标 经 过 医 像 | 


图 4-42 设置 “插入 鼠标 经 这 图 像 ”对 话 框 
设置 完毕 ， 单 击 “ 确 定 ”按钮 关闭 对 话 框 。 
13. 插入 其 他 导航 图 片 
按照 上 一 步 同样 的 方法 ， 在 其 他 单元 格 中 插入 鼠标 经 过 图 像 ， 如 图 4-43 所 示 。 


图 4-43 插入 导航 图 片 


14. 保存 文件 并 预览 
执行 “文件 ”|“ 保 存 ” 命 令 , 保存 页 面 ， 然 后 在 浏览 器 中 预览 页 面 效 果 ， 如 图 4-26 所 示 。 


4.5 答疑 解 惑 


1. 在 Dreamweaver CC 2018 中 为 图 片 添加 的 替换 文本 不 显示 怎么 办 ? 

答 : 在 网 页 中 显示 图 片 替换 文本 的 是 title 标签 (“标题 ”属性 )。alt 标签 (“替换 ”属性 ) 用 于 在 图 片 
不 能 成 功 加 载 时 显示 ,补充 说 明 图 片 所 表达 的 意思 。 因 此 ,在 设置 图 片 属性 时 ,最 好 同时 设置 “标题 ” 和 “和 蔡 
换 ” 属 性 。 
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2. 怎样 使 水 平 线 的 长 度 自 适应 浏览 器 窗口 大 小 ? 

答 : 在 “属性 ”面板 上 将 水 平 线 的 “宽度 ”单位 设置 为 “百分比 ”。 

3. 如 何 使 页 面 中 的 文字 与 图 片 对 齐 ? 

答 : 选中 图 片 之 后 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 的 “对 齐 ” 子 命令 中 可 以 设置 对 齐 方式 。 


4.6 学 习 效 果 自 测 


一 、 选 择 题 
1. 实现 鼠标 经 过 图 像 的 两 幅 图 像 应 ( )。 
A. 相 差 3 倍 B. 相差 2 倍 C. 相差 1 售 D. 大 小 一 样 
2. 在 网 页 中 使 用 的 最 为 普遍 的 图 像 格式 主要 是 ( )。 
A.GIF 和 JPG B. GIF 和 BMP C.BMP 和 JPG D. BMP 和 PSD 
3. 具有 图 像 文件 小 、 下 载 速度 快 、 下 载 时 隔行 显示 、 支 持 透 明 色 、 多 个 图 像 能 组 成 动画 的 图 像 格式 


的 是 ( 光 
A.JPG B. BMP C.GIF D. PSD 
4. 如 果 需 要 在 Dreamweaver CC 2018 中 对 图 像 文 件 使 用 Fireworks 进行 编辑 , 则 应 该 进行 以 下 ) 
项 准备 工作 。 
A. 在 插入 图 像 后 马上 存盘 
B. 找到 图 像 的 源 PNG 文件 
C. 必须 将 Fireworks 和 Dreamweaver CC 2018 都 安装 在 计算 机 上 
D. 在 Dreamweaver CC 2018 中 ， 必 须 将 Fireworks 设置 为 PNG 文件 的 默认 图 像 编辑 器 
5. 通过 图 像 的 属性 面板 不 能 完成 的 任务 是 ( 访 


A. 修改 图 像 的 大 小 B. 设置 图 像 的 边 距 
C. 设置 图 像 的 ID D. 指定 图 像 的 第 二 幅 替 换 图 像 
二 、 判 断 题 


1. GIF 图 像 采用 LZW 无 损 压缩 算法 ， 最 多 能 显示 256 种 颜色 。( ) 

2. 在 Dreamweaver CC 2018 的 图 像 属 性 面板 上 ， 可 以 对 图 像 进行 优化 。( ) 

3. 在 Dreamweaver CC 2018 中 ， 并 不 可 以 对 图 像 进行 编辑 ， 如 果 需 要 对 图 像 进行 编辑 ， 必 须 在 图 像 
处 理 软件 中 进行 。( ) 

4. 背景 图 像 的 重复 方式 有 不 重复 、 重 复 、 横 向 重复 和 纵向 重复 。( ) 

5. 通过 属性 面板 可 以 设置 水 平 线 的 显示 颜色 。( ) 

三 、 填 空 题 

1. 网 页 中 的 图 像 标签 是 ( )s 

2. 在 网 页 中 ， 可 以 使 用 ( je ) 和 ( ) 格式 的 图 像 。 

3. 在 “插入 鼠标 经 过 图 像 " 对 话 框 中 ,“ 原 始 图 像 " 用 于 指定 ( );“ 鼠 标 经 过 图 像 "用 于 指定 ( »; 

四 、 操 作 题 

参照 本 章 的 实例 讲解 ， 制 作 一 个 简单 的 图 像 页 面 。 


Se 


: 在 网 页 设计 的 众多 环节 中 ， 页 面 布局 是 最 为 重要 的 环节 之 一 。 表 
lb 格 可 以 将 数据 、 文 本 、 图 片 规范 地 显示 在 页 面 上 ， 和 避免 杂乱 无 章 。 不 3 
lf 仅 如 此 ， 表 格 还 具有 灵活 的 特点 ， 合 并 、 折 分 单元 格 和 谋 套 表格 可 以 

实现 复杂 的 布局 设计 ， 是 用 于 在 HTML 页 面 上 显示 表格 式 数据 及 对 


各 了 解 表格 的 基本 组 成 
掌握 表格 的 基本 操作 | 
全 利用 表格 排版 制作 页 面 3 
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5.1 ”创建 表格 的 方法 


使 用 表格 设计 网 页 布局 ， 可 以 精准 地 控制 页 面 元 素 位 置 ， 使 网 页 看 起 来 条 理 清晰 、 意 图 鲜明 。 本 节 
将 重点 介绍 创建 表格 的 几 种 常用 方法 。 


5.1.1 表格 的 基本 组 成 


常见 的 表格 如 图 5-1 所 示 ， 由 一 些 被 线条 分 隔 的 小 格 组 单元 格 列 
成 每 个 小 格 就 是 一 个 单元 格 , 这些 线条 就 是 单元 格 的 边框 。 
表格 一 般 被 划分 为 单元 格 、 行 和 列 三 部 分 。 单 元 格 是 表格 的 CL ] | 
基本 单元 ， 它 们 是 边框 分 割 开 的 区 域 ， 文 字 、 图 像 等 对 象 均 | | 
可 根据 需要 插入 到 单元 格 中 。 位 于 水 平方 向 上 的 一 行 单元 格 “” 
称 作 一 行 ， 位 于 垂直 方向 上 的 一 列 单元 格 称 作 一 列 。 表 格 是 图 5-1 表格 的 基本 结 
可 以 岩 套 的 元 素 。 


5.1.2 上 机 练习 一 一 使 用 “表格 ”对 话 框 插入 表格 


> 练习 目标 


通过 在 Dreamweaver CC 2018 中 插入 表格 的 练习 ， 熟 悉 “ 表 格 ” 对 ”5-1 上 机 练习 一 使用“ 表格” 


话 框 中 各 个 选项 的 意义 和 设置 方法 。 对 话 框 插入 表格 
“设计 思路 


新 建 一 个 空白 的 网 页 文件 ， 然 后 使 用 “表格 ”对 话 框 设置 表格 属性 。 


记忆 操作 步骤 


(1) 启动 Dreamweaver CC 2018, 执行 “文件 ” |“ 新建” 命令， 在 弹出 的 对 话 框 中 设置 文档 类 型 为 
HTML, 无 框架 ， 创 建 一 个 空白 的 网 页 文件 。 

(2 ) 在 “设计 ”视图 中 需要 插入 表格 的 位 置 单 击 , 然 后 执行 “插入 ”|“ 表 格 ” 命 令 , 或 打开 “HTML” 
插入 面板 ， 单 击 “表格 ”按钮 鸭 ， 如 图 5-2 所 示 。 弹 出 如 图 5-3 所 示 的 “表格 ”对 话 框 。 


Table le 


图 5-2 单 击 “Table”( 表格 ) 按钮 图 5-3 “Table”( 表格 ) 对 话 框 
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9 行 数 : 设置 表格 的 行 数 。 
9 列 : 设置 表格 的 列 数 。 
9 表格 宽度 : 设置 表格 的 宽度 和 单位 。 


入/ 提示:“ 像 素 "“ 百 分 比 ”这 两 种 单位 的 区 别 在 于 ， 以 像素 为 单位 设置 的 表格 宽度 是 表格 的 
实际 宽度 ， 是 固定 的 ; 而 用 百分比 设 定 的 表格 宽度 将 随 浏览 器 窗口 的 大 小 改变 而 改变 。 


Y 边框 粗细 : 设置 表格 的 边框 厚度 ， 以 像素 为 单位 。 设 置 为 0 时 不 显示 边框 。 


昌 ) 提示 :“ 边 框 粗细 ”属性 设置 的 是 表格 边框 的 宽度 ， 表 格 中 单元 格 的 边框 不 受 该 值 影响 。 


和 9 单元 格 边 距 : 用 于 设置 表格 内 单元 格 的 内 容 和 边框 的 间距 。 

所 单元 格 间距 : 用 于 设置 表格 内 单元 格 之 间 的 距离 ， 相 当 于 设置 单元 格 的 边框 厚度 。 

9 标题 : 用 于 设置 标题 显示 方式 ， 有 四 个 选项 ， 具 体 效 果 见 相应 的 图 标 ， 可 以 点 击 图 标 选 中 
其 一 。 

所 辅助 功能 一 一 标题 : 用 于 设置 表格 的 标题 。 

辅助 功能 一 一 “摘要 ”: 用 于 设置 表格 的 说 明 信 息 ， 对 表格 的 显示 无 影响 。 

(3) 在 “ 行 数 ” 文 本 框 中 输入 表格 的 行 数 3; 在 “ 列 ” 呈 


文本 框 中 输入 表格 的 列 数 3; 在 “表格 宽度 ”文本 框 中 输入 3 | 

400 像素 ; “边框 粗细 "设置 为 ! 像素 ;“ 标 题 " 选择 "顶部 "， 

在 “ 畏 题 ”文本 框 输入 “第 一 张 表格 "， 其 余 | 

进项 保持 由 认 信 。 pp 
) 单 击 “ 确 定 ”按钮 即 可 插入 表格 ， 最 终 制作 效果 如 图 5-4 插入 的 表格 

图 5-4 所 示 。 

(以 知识 拓展 


使 用 DOM 面板 插入 表格 

使 用 Dreamweaver CC 2018 中 的 DOM 面板 也 可 以 很 便捷 地 在 网 页 中 插入 表格 。 方 法 如 下 ， 

(1) 执行 “窗口 ”|“DOM” 命 令 ， 打 开 DOM 面板 。 

( 2 ) 按 空格 键 或 单 击 DOM 面板 中 与 表格 插入 位 置 相 邻 的 标签 。 例 如 ， 
要 在 一 张 图 片 附近 插入 表格 ， 则 选中 该 图 片 的 标签 <img>。 

( 3 ) 单 击 标签 左 侧 的 “添加 元 素 ” 按 钮 ， 弹 出 下 拉 菜 单 ， 用 于 选择 要 
插入 元 素 的 位 置 ， 如 图 5-5 所 示 。 

( 4 ) 根据 需要 选择 要 插入 元 素 的 位 置 。 例 如 要 在 图 片 后 插入 元 素 ， 则 
选择 “在 此 项 后 插入 ”命令 。DOM 面板 中 将 插入 一 个 占 位 符 Div 标签 。 

( 5 ) 修改 标签 名 称 。 如 果 要 插入 表格 ， 则 键入 需要 的 表格 标签 table， 
如 图 5-6 所 示 。 此 时 ， 在 页 面 中 将 自动 插入 一 个 宽 为 200 像素 ，3 行 3 列 
的 表格 ， 如 图 5-7 所 示 。 

于 在 Dreamweaver CC 2018 中 ， 表 格 总 是 单独 占据 一 行 ， 因 此 ， 尽 
管 选择 在 图 片 后 插入 表格 ， 但 表格 会 显示 在 图 片 下 方 ， 而 不 是 右 侧 。 图 5-5 “添加 元 素 ” 下 拉 荣 单 
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图 5-7 使 用 DOM 面板 插入 的 表格 


图 5-6 ”修改 标签 名 称 


5.1.3 ”创建 谋 套 表格 


嵌 套 表格 是 位 于 一 个 单元 格 中 的 表格 ,使 用 赃 套 表格 可 以 创建 更 复杂 的 网 页 布局 。 

在 要 惧 套 表格 的 单元 格 中 单 击 鼠 标 ， 执 行 “插入 ”|“ 表 格 ”命令 ， 即 可 创建 说 套 表格 。 例 如 ， 在 一 
个 宽度 为 300 像素 的 3 行 3 列 的 表格 的 中 间 单 元 格 中 插入 一 个 宽度 为 200 像素 的 3 行 3 列 的 表格 ,就 形 
成 一 个 如 图 5-8 所 示 的 嵌 套 表格 

在 Dreamweaver CC 2018 中 ， 可 以 像 编 辑 普通 表格 一 样 对 嵌 套 表格 进行 格式 设置 但 其 宽度 受 它 所 
在 单元 格 的 宽度 的 限制 ， 如 图 5-8 所 示 。 尽 管 设置 了 榜 套 表格 的 宽度 为 200， 但 其 实际 宽度 为 它 所 在 单元 
格 的 宽度 

与 插入 表格 类 似 ， 使 用 DOM 面板 也 可 以 很 轻松 地 插入 啼 套 表格 。 例 如 ， 要 在 第 2 行 第 2 列 单元 格 
中 嵌 套 一 个 3 行 3 列 的 表格 ， 可 以 执行 如 下 操作 : 

(1) 选中 要 丹 套 表格 的 单元 格 , 打开 DOM 面板 , 单 击 “ 添 加 元 素 ” 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“插入 子 元 素 ” 命 令 ， 如 图 5-9 所 示 ， 

(2) 将 自动 插入 的 Div 标签 修改 为 table， 按 Enter 键 提交 ， 如 图 5-10 所 示 。 在 DOM 面板 中 可 以 很 
直观 地 看 到 元 素 之 间 的 结构 关系 。 赃 套 后 的 表格 效果 如 图 5-8 所 示 


在 此 项 前 插入 
在 此 项 后 插入 


环绕 标签 


BR 


图 5-8 嵌 套 表格 图 5-9 插入 子 元 素 图 5-10 赂 套 的 表格 标签 
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地) 提示 : 制作 嵌 套 表格 应 遵循 以 下 两 个 原则 : 

(1) 从 外 向 内 建立 。 先 建立 最 大 的 表格 ， 再 在 其 内 部 创建 较 小 的 表格 。 

(2 ) 最 好 将 外 部 表格 宽度 设置 成 一 个 特定 的 绝对 像素 值 ， 而 将 内 部 表格 宽度 设置 为 相对 的 百 分 
比 数 。 当 然 ， 这 不 是 一 个 不 容 改变 的 规则 ， 如 果 内 部 表格 宽度 也 设 为 一 个 绝对 的 像素 值 ， 那 么 表格 
的 每 一 部 分 宽度 都 要 计算 精准 。 


5.2 编辑 表格 和 单元 格 


通常 情况 下 ， 直 接 插入 的 表格 并 不 能 满足 网 页 布局 的 需求 ， 因 此 还 需要 对 表格 和 单元 格 进行 编辑 ， 
例如 设置 表格 在 页 面 上 的 显示 位 置 、 单 元 格 内 容 的 对 齐 方式 、 背 景 颜色 和 背景 图 像 等 。 


5.2.1 选择 表格 元 素 


在 对 表格 或 单元 格 进行 操作 之 前 ， 必 须 先 选中 表格 元 素 。 在 Dreamweaver CC 2018 中 选择 表格 元 素 
的 方法 有 很 多 种 ， 下 面 简要 介绍 几 种 常用 的 方法 。 

1. 选择 整个 表格 

和 将 鼠标 指针 放置 在 表格 的 任 一 单元 格 中 ， 然 后 在 状态 栏 上 单 击 <table> 标签 ， 如 图 5-11 所 示 。 

和 单 击 表格 的 任 一 条 边线 ， 即 可 选中 整个 表格 。 选 中 整个 表格 的 效果 如 图 5-12 (a ) 所 示 。 

和 9 执行 “修改 ”|“ 表 格 ”|“ 选 择 表格 ”命令 。 

9 在 “实时 ”视图 中 ， 单 击 表格 顶端 或 底部 的 “设置 表格 格式 ”按钮 图 ， 即 可 选中 整个 表格 ， 如 

图 5-12 (b ) 所 示 。 


图 5-11 选中 <table> (表格 ) 标签 图 5-12 选中 整个 表格 


2. 选中 一 行 或 一 列 单元 格 
所 将 鼠标 指针 放置 在 一 行 单元 格 的 左边 界 上 ， 或 一 列 单元 格 的 顶端 ， 当 显示 黑色 箭头 〈 或 吵 ) 时 
单 击 鼠 标 左 键 。 选 中 一 列表 格 单元 的 情况 如 图 5-13 (a ) 所 示 。 


图 5-13 ”选中 一 列 或 一 行 表格 单元 


和 在 “实时 ”视图 中 选中 表格 ,将 鼠标 指针 巧 停 在 要 选择 的 行 或 列 的 边框 即 可 看 到 一 个 黑色 箭头 ， 
如 图 5-13(b ) 所 示 ， 单 击 以 进行 选择 。 
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3. 选中 多 个 连续 的 单元 格 

和 在 一 个 单元 格 中 按 下 鼠标 左 键 纵向 或 横向 拖 动 到 另 一 个 单元 格 。 选 中 多 个 连续 单元 格 的 情况 如 
图 5-14 (a ) 所 示 。 

和 单 击 一 个 表格 单元 ,然后 按 住 Shift 键 单 击 另 一 个 表格 单元 , 所 有 和 矩形 区 域内 的 表格 单元 都 被 选择 。 
9 在 “实时 ”视图 中 选中 表格 后 ， 按 下 鼠标 左 键 拖 动 ; 或 按 住 Shift 键 单 击 需 要 选择 的 单元 格 ， 如 
图 5-14(b) 所 示 。 

4. 选中 多 个 不 连续 的 单元 格 

站 按 住 Ctrl 键 ， 单 击 多 个 要 选择 的 单元 格 。 选 中 后 的 效果 如 图 5-15 (a ) 所 示 。 

9 在 “实时 ”视图 中 选中 表格 后 ， 按 住 Ctrl 键 单 击 需 要 选择 的 单元 格 ， 效 果 如 图 5-15(b ) 所 示 。 


| i = = 
EE 
El ES 
(a) (b) 


图 5-14 选中 多 个 连续 的 单元 格 图 5-15 ”选中 多 个 不 连续 表格 单元 


5.2.2 ”设置 表格 属性 
与 其 他 网 页 元 素 类 似 ， 表 格 也 有 属于 自己 的 属性 面板 ， 如 图 5-16 所 示 。 


图 5-16 表格 属性 


“属性 ”面板 上 的 属性 与 “表格 ”对 话 框 中 的 参数 基本 相同 ， 下 面 简要 介绍 几 个 特定 的 属性 。 

和 表格 : 用 于 设置 表格 可 被 脚本 引用 的 名 称 。 一 般 可 不 填 。 

和 Align: 用 于 设置 表格 相对 于 文档 的 对 齐 方式 ,有 4 个 选项 :“ 默 认 ”“ 左 对 齐 “ 居 中 对 齐 “ 右 对 齐 ”。 
和 Class: 用 于 设置 应 用 于 表格 的 CSS 样式 。 

和 Border: 用 于 设置 表格 的 边框 厚度 ， 以 像素 为 单位 。 设 置 为 0 时 将 不 显示 边框 。 


得 ) 教 你 一 招 : 如 果 要 在 “边框 ”设置 为 0 时 查看 单元 格 和 表格 边框 ， 可 以 选择 “查看 ”|“ 设 
计 视 图 选项 ”| “可 视 化 助理 ”|“ 表 格 边框 ”命令 。 


3 图 : 清除 列 宽 。 单 击 此 按钮 将 表格 的 列 宽 压 缩 到 最 小 值 ， 但 不 影响 单元 格 内 元 素 的 显示 ， 如 图 5-17 
所 示 。 


17 7 


2 B ll | 
123456789 E 0055789 
引 


图 5-17 清除 列 宽 前 、 后 
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9 国 : 清除 行 高 。 单 击 此 按钮 将 表格 的 行 高 压缩 到 最 小 值 ， 但 不 影响 单元 格 内 元 素 的 显示 。 
表格 宽度 的 单位 转化 为 像素 ( 即 固 定 大 小 )。 
3 图 : 将 表格 宽度 的 单位 转化 为 百分比 ( 即 相 对 大 小 )。 


5.2.3 ”设置 单元 格 属性 
把 鼠标 指针 移动 到 单元 格 内 ， 在 “属性 ”面板 上 可 对 这 个 单元 格 的 属性 进行 设置 ， 如 图 5-18 所 示 。 


图 5-18 设置 单元 格 属性 


单元 格 属性 面板 分 为 上 、 下 两 部 分 。 上 半 部 分 用 于 设置 单元 格 内 容 的 属性 ， 下 半 部 分 用 于 设置 单元 
格 的 属性 。 
和 水 平 : 设置 单元 格 内 容 的 水 平 对 齐 方式 
垂直 : 设置 单元 格 内 容 的 垂直 对 齐 方式 
宽 : 设置 单元 格 宽度 ， 可 用 像素 或 百分比 表示 ， 默 认 以 像素 为 单位 。 
高 : 设置 单元 格 高 度 ， 可 用 像素 或 百分比 表示 ， 默 认 以 像素 为 单位 
不 换行 : 防止 单词 换行 。 选 择 此 选项 ， 单 元 格 将 根据 文本 长 度 自 动 加 宽 ， 而 不 是 自动 换行 。 
标题 : 将 当前 单元 格 设置 为 标题 单元 格 。 其 中 的 文字 将 以 加 粗 黑 体 显示 。 
背景 颜色 : 设置 单元 格 的 背景 颜色 。 单 击 颜色 按钮 剧 ， 可 在 弹出 的 调 色 板 中 选择 一 种 颜色 ， 或 在 
文本 框 中 输入 对 应 于 某 种 颜色 的 代码 
恩 : 合并 单元 格 ， 选 中 多 个 连续 的 单元 格 时 可 用 。 作 用 是 将 多 个 单元 格 合并 为 一 个 单元 格 。 
Y 国 : 拆 分 单元 格 ,将 单元 格 拆 分 为 多 行 或 多 列 。 


9 
a 
i 
i 
i 
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辣 注意 : 使 用 属性 面板 更 改 表 格 和 单元 格 的 属性 时 ， 要 注意 表格 格式 设置 的 优先 顺序 。 单 元 格 
格式 设置 优先 于 行 格式 设置 ， 行 格式 设置 又 优先 于 表格 格式 设置 。 例 如 ， 将 单个 单元 格 的 背景 颜色 
设置 为 蓝 色 ， 然 后 将 整个 表格 的 背景 颜色 设置 为 黄色 ， 则 蓝 色 单元 格 不 会 变 为 黄色 ， 因 为 单元 格格 
式 设 置 优先 于 表格 格式 设置 。 


(以 知识 拓展 
设置 单元 格 背 景 图 像 

从 前 面 两 节 可 以 看 出 ， 用 户 不 能 直接 在 Dreamweaver CC 2018 的 属性 面板 上 设置 表格 或 单元 格 的 
背景 图 像 ， 需 要 定义 CSS 规则 进行 指定 。 

1. 插入 表格 

执行 “插入 ”一 “表格 ”命令 ,在 弹出 的 “表格 ”对 话 框 中 设置 表格 的 宽度 为 300 像素 ， 行 数 为 3， 
列 为 3， 边框 粗细 为 1。 

2. 定义 CSS 规则 

(1 ) 将 鼠标 指针 放 于 第 1 行 第 1 列 的 单元 格 中 ， 鼠 标 右 击 弹出 快捷 菜单 ,选择 “CSS 样式 ”|“ 新 建 ” 
命令 ， 打 开 “ 新 建 CSS 规则 ”对 话 框 ， 如 图 5-19 所 示 。 
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EET 


迁 择 器 类 型: 
为 Css 规则 选择 上 下 文 迁 择 器 类 型 
[ 庆 ( 司 应 用 于 任何 Ja 元 素 ) 下 


选择 器 名 称 : 
选择 或 输入 选择 器 名 称 。 


图 5-19 “新 建 CSS 规则 ”对 话 框 


(2 ) 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “标签 “选择 器 名 称 ” 选 择 “td”,“ 规 则 定义 ”选择 “ 仅 
限 该 文档 ”"。 然 后 单 击 “确定 ”按钮 打开 对 应 的 规则 定义 对 话 框 。 

( 3 ) 在 对 话 框 左 侧 的 “分 类 ”列表 中 选择 “背景 "， 然 后 单 击 “ 背 景 图 像 ”( Background-image ) 
右 侧 的 “浏览 ”按钮 在 弹出 的 资源 对 话 框 中 选择 需要 的 背景 图 片 ， 如 图 5-20 所 示 。 单 击 “确定 ”按钮 
关闭 对 话 框 。 


志 的 CSS 规则 定义 | 


图 5-20 设置 背 央 图 像 


此 时 ， 在 文档 窗口 中 可 以 看 到 表格 中 所 有 的 单元 格 都 自动 应 用 了 选择 的 背景 图 片 ， 如 图 5-21 所 示 。 

如 果 希 望 不 同 的 单元 格 应 用 不 同 的 背景 图 像 ， 则 选中 要 设置 背景 图 像 的 单元 格 之 后 ， 在 设置 “选择 
器 类 型 ”时 选择 “类 ”， 然 后 在 “选择 器 名 称 ”中 输入 名 称 ， 如 .background1， 如 图 5-22 所 示 。 有 关 选 
择 器 的 类 型 和 定义 规则 将 在 第 8 章 进 行 详细 讲解 。 


me "VA me YAM "YA Er 
me Vode Ve 
图 5-21 设置 单元 格 背 申 图 像 图 5-22 设置 单元 格 背 景 图像 


表格 的 背景 图 像 或 背景 颜色 设置 方法 与 此 相同 ， 不 同 的 是 ， 选 择 器 为 “标签 ”时 ， 标 签 应 选择 
table。 具 体操 作 方法 在 此 不 再 袭 述 。 
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5.2.4” 拆 分 与 合并 单元 格 


可 将 


效果 


1. 合并 单元 格 

选中 多 个 连续 的 单元 格 之 后 ， 执 行 以 下 操作 之 一 可 以 将 选中 的 单元 格 合 并 为 一 个 单元 格 。 

和 单 击 属性 面板 中 的 “合并 单元 格 ” 按 钮 匡 副 . 

和 执行 “编辑 ”|“ 表 格 ”|“ 合 并 单元 格 ”命令 。 

9 在 选中 的 单元 格 上 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 执行 “表格 ”|“ 合 并 单元 格 ” 命 令 。 
9 在 实时 视图 中 选中 单元 格 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “合并 单元 格 ”命令 。 
这 时 原来 的 多 个 单元 格 就 合并 为 一 个 ， 如 图 5-23 所 示 。 


医 Se i 
= 三 二 le 


图 5-23 合并 单元 格 前 、 后 的 效果 


2. 拆 分 单元 格 

将 鼠标 指针 放置 在 要 拆 分 的 单元 格 中 ,执行 以 下 操作 之 一 ,弹出 如 图 5-24 所 示 的 “ 拆 分 单元 格 "对 话 框 ， 
-个 单元 格 拆 分 为 多 行 或 多 列 单元 格 

Y 单 击 属性 面板 中 的 “ 拆 分 单元 格 ”按钮 国 

执行 “ 编 得 ” |“ 表格”|“ 拆 分 单元 格 ” 命 令 

外 在 选中 的 单元 格 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 执行 “表格 ”|“ 拆 分 单元 格 ” 命 令 。 

9 在 实时 视图 中 选中 单元 格 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 拆 分 单元 格 ” 命 令 ， 

例如 ,在 对 话 框 中 选中 “ 列 ” 单 选 按钮 ,在 “ 列 数 " 文本 框 中 输入 3。 单 击 “ 确 定 ” 按钮 完成 单元 格 拆 分 ， 
如 图 5-25 所 示 。 


图 5-24 “ 拆 分 单元 格 ” 对 话 栓 图 5-25 拆 分 单元 客 前 、 后 的 效果 
5.2.5 上 机 练 > 设计 简单 的 页 面 布局 


二 朱 习 目标 


在 Dreamweaver CC 2018 中 ， 表 格 主要 应 用 于 网 页 布局 和 内 容 定位 。 通 过 前 ”5-2 上 机 练习 一 一 设计 


面 对 基 础 知识 的 讲解 ， 结 合 本 节 练 习 进一步 熟悉 表格 、 单 元 格 的 基本 操作 ， 掌 握 简单 的 页 面 布局 
运用 合并 单元 格 、 赃 套 表格 设计 整个 页 面 布局 的 方法 。 
设计 电路 


元 格 ， 


本 例 要 设计 如 图 5-26 所 示 的 页 面 的 布局 ， 首 先 在 页 面 中 插入 表格 ， 
单 击 “ 属 性 ”面板 上 的 “合并 所 选单 元 格 ”按钮 ， 合 并 多 个 连续 的 单元 格 。 然 后 在 一 个 单元 格 中 
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嵌 套 表格 ， 完 成 页 面 整体 布局 。 表 格 设计 的 页 面 布局 如 图 5-27 所 示 。 


图 5-26 页面 效 果 图 5-27 ”页面 布局 


户 为 操作 步骤 


1. 新 建文 件 

启动 Dreamweaver CC 2018, 执行 “文件 ”|“ 新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 设置 文档 
类 型 为 HTML， 无 框架 ， 单 击 “ 创 建 ” 按 钮 ， 新 建 一 个 空白 的 HTML 文档 

2. 插入 表格 

将 鼠标 指针 放 在 页 面 中 ,执行 “插入 "| “表格 ”命令 ,在 弹出 的 “表格 ” 对话 框 中 设置 行 数 为 10, 列 为 7， 
表格 宽 为 1001 像素 ,边框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 为 0， 如 图 5-28 所 示 。 单 击 “确定 ”按钮 择 
入 表格 。 


3. 设置 表格 对 齐 方式 


选中 页 面 上 的 表格 ,在 “属性 ”面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “居中 对 齐 ” 选 项 ,如 图 5-29 所 示 。 
这 样 ， 表 格 将 在 页 面 上 水 平 居 中 显示 。 


Table 2 


图 5-28 设置 “Table”( 表格 ) 对 话 框 图 5-29 设置 表格 居中 对 齐 
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4. 合并 单元 格 

将 鼠标 指针 放 在 第 1 行 第 1 列 单元 格 中 ， 按 下 鼠标 左 键 向 右 拖 动 至 第 7 列 ， 然 后 在 “属性 ”面板 上 
单 击 “合并 所 选单 元 格 ” 按 钮 ， 如 图 5-30 所 示 ， 合 并 第 1 行 单元 格 。 同 样 的 方法 ， 合 并 第 2 行 第 1 列 至 
第 9 行 第 1 列 单元 格 ， 效 果 如 图 5-31 所 示 。 


图 5-30 单 击 “合并 所 选单 元 格 ” 按 钮 图 5-31 合并 单元 格 


5. 合并 单元 格 
将 鼠标 指针 放 在 第 2 行 第 2 列 单元 格 中 ， 按 下 鼠标 左 键 向 右 拖 动 到 第 2 行 第 5 列 单元 格 , 再 向 下 拖 
动 到 第 3 行 第 5 列 单元 格 ， 然 后 在 “属性 ”面板 上 单 击 “合并 所 选单 元 格 ”按钮 ， 如 图 5-32 所 示 


图 5-32 合并 单元 格 


6. 府 套 表格 

在 上 一 步 合并 的 单元 格 中 单 击 ,执行 “插入 ”|“ 表 格 ” 命 令 , 在 弹出 的 对 话 框 中 设置 行 数 为 1, 列 为 2， 
表格 宽度 为 100% ,边框 粗细 .单元 格 边 距 和 单元 格 间距 均 为 0, 如 图 5-33 所 示 。 单 击 “ 确 定 ” 按 钮 插入 表格 ， 
效果 如 图 5-34 所 示 。 


Table 


图 5-33 设置 “Table”( 表格 ) 对 话 框 图 5-34 ” 艇 套 表 格 的 效果 


7. 合并 单元 格 
在 第 4 行 第 2 列 单元 格 中 单 击 鼠 标 左 键 ， 按 下 Shifit 键 ， 单 击 第 8 行 第 5 列 的 单元 格 ， 即 可 选中 一 个 
和 矩形 区 域 ， 如 图 5-35 所 示 。 然 后 在 “属性 ”面板 上 单 击 “ 合 并 所 选单 元 格 ”按钮 ， 效 果 如 图 5-36 所 示 。 
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图 5-35 ”选中 连续 单元 格 图 5-36 合并 单元 格 的 效果 


8. 合并 单元 格 
第 8 行 第 2 列 单元 格 中 单 击 ， 按 下 鼠标 左 键 向 右 拖 动 到 第 7 行 ， 然 后 单 击 鼠标 右键 在 弹出 的 
快捷 菜单 中 选择 “表格 ”|“ 合 并 单元 格 ”命令 。 同 样 的 方法 ， 合 并 最 后 一 行 单元 格 ， 效 果 如 图 5-37 
所 示 。 

9. 谋 套 表格 

将 鼠标 指针 放置 在 合并 后 的 第 8 行 第 2 列 单元 格 中 ， 执行“ 插入 ”|“ 表 格 ” 命 令 ， 在 弹出 的 对 话 框 
中 设置 行 数 为 1， 列 为 2， 表 格 宽度 为 100%， 边 框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 为 0。 单 击 “确定 ” 
按钮 插入 表格 ， 如 图 5-38 所 示 。 


-上 = 


图 5-37 合并 单元 格 的 效果 图 5-38 赚 套 表格 


10. 合并 单元 格 

在 第 2 行 第 7 列 单元 格 中 单 击 ， 按 下 鼠标 左 键 向 下 拖 动 到 第 8 行 ， 然 后 在 “属性 ”面板 上 单 击 “ 合 
并 所 选单 元 格 ” 按 钮 , 如 图 5-39 所 示 。 同 样 的 方法 , 合并 第 2 行 第 6 列 至 第 8 行 第 6 列 单元 格 , 如 图 5-40 
所 示 。 

11. 谋 套 表格 

将 鼠标 指针 放 在 第 6 列 第 2 行 至 第 8 行 合并 的 单元 格 中 ,执行 “插入 ”| “表格 ” 命令 ,在 弹出 的 “表格 ” 
对 话 框 中 设置 行 数 为 5， 列 为 1， 表 格 宽度 为 100%, 边框 粗细 、 单 元 格 边 距 和 单元 格 间距 为 0， 如 图 5-41 
所 示 。 单 击 “确定 ”按钮 ， 即 可 插入 一 个 嵌 套 表格 ， 效 果 如 图 5-26 所 示 


Table [| 


图 5-39 合并 第 7 列 第 2 行 至 第 8 行 单元 格 


L_ 


图 5-40 合并 第 6 列 第 2 行 至 第 8 行 单 元 格 图 5-41 设置 “Table”( 表格 ) 对话 框 
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12. 保存 文件 


执行 “文件 ” |“ 保存” 命令 ， 保 存 文件 。 


5.2.6 增加、 删除 行 或 列 


在 Dreamweaver CC 2018 中 ,， 增 加、 删除 行 或 列 的 操作 方法 有 多 种 ， 下 面 简要 介绍 常用 的 一 些 操作 方法 。 


1. 增加 行 

和 执行 “修改 ”|“ 表 格 ”|“ 插 入 行 ”命令 ， 在 选 定单 元 格 之 上 插入 一 行 。 

和 在 单元 格 上 单 击 鼠 标 右键 ,在 弹出 的 上 、 下 文 菜单 执行 “表格 ”|“ 插 入 行 ”命令 ,插入 一 行 。 
在 实时 视图 中 选中 单元 格 , 单 击 和 鼠标 右键 ,在 弹出 的 快捷 菜单 中 选择 “插入 行 ”命令 。 

选中 第 2 行 的 任意 一 个 单元 格 , 插入 空白 行 前 、 后 的 效果 如 图 5-42 所 示 。 

2. 增加 列 

和 执行 “修改 ”| “表格 ”|“ 插 入 列 ” 命 令 ， 在 选 定单 元 格 左 侧 插入 一 列 。 

9 在 单元 格 上 单 击 和 鼠标 右键 ,在 弹出 的 快捷 菜单 中 执行 “表格 ”|“ 插 入 列 ” 命 令 ， 插 入 一 列 。 
9 在 实时 视图 中 选中 单元 格 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “插入 列 ” 命 令 。 
选中 第 2 列 的 任意 一 个 单元 格 ,插入 空白 列 前 、 后 的 最 终 效果 如 图 5-43 所 示 。 


ss 3| 
古 司 区 可 本 可 | 
| 醒 : 到 | 醒 z 末 | 攻 号 证 | 基 > 到 本 3 Yl " E 
[a [le | [a |@|e G2 | G3 
图 5-42 ”插入 室 白 行 前 、 后 的 效果 图 5-43 插入 空白 列 前 、 后 的 效果 


3. 删除 行 

和 选中 行 中 的 任意 一 个 单元 格 ， 执行“ 编辑 ”|“ 表 格 ”|“ 删 除 行 ”命令 。 

和 在 单元 格 上 单 击 和 鼠标 右键 ,在 弹出 的 快捷 菜单 中 执行 “表格 ”|“ 删 除 行 ”命令 。 

9 将 鼠标 指针 放置 在 要 删除 的 行 的 左边 界 ， 当 鼠标 指针 变 为 黑色 箭头 哩 时 单 击 鼠 标 ， 然 后 按 Delete 
键 删除 行 。 

和 切换 到 实时 视图 ， 选 中 要 删除 的 行 ， 然 后 按 Delete 键 删除 。 

删除 行 前 、 后 的 效果 如 图 5-44 所 示 。 


4. 删除 列 

选中 列 中 的 任意 一 个 单元 格 ， 执 行 “ 编 辑 ”|“ 表 格 ”|“ 删 除 列 ”命令 。 

和 在 单元 格 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 执行 “表格 ”|“ 删 除 列 ” 命 令 。 

9 将 鼠标 指针 放置 在 要 删除 的 列 的 上 边界 ， 当 鼠标 指针 变 为 黑色 箭头 看 时 单 击 和 鼠标 ， 然 后 按 Delete 
键 删除 列 。 

切换 到 实时 视图 ， 选 中 要 删除 的 列 ， 然 后 按 Delete 键 删除 。 

删除 第 2 列 前 、 后 的 效果 如 图 5-45 所 示 。 
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图 5-44 ”删除 第 2 行 前 、 后 的 效果 图 5-45 ”删除 第 2 列 前 、 后 的 效果 
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5.2.7 复制、 粘贴 单元 格 


在 Dreamweaver CC 2018 中 ， 可 以 非常 灵活 地 复制 、 粘 贴 单 元 格 。 可 以 一 次 复制 、 粘 贴 一 个 单元 格 ， 
也 可 以 一 次 复制 、 粘 贴 一 行 、 一 列 乃 至 多 行 、 多 列 单元 格 。 但 不 能 复制 不 是 矩形 的 区 域 。 
(1 ) 选择 表格 中 的 一 个 或 多 个 单元 格 。 所 选 的 单元 格 必 须 是 连续 的 ， 并 且 形 状 必 须 为 矩形 。 
(2 ) 鼠标 右 击 选 中 的 单元 格 ， 在 弹出 的 快捷 菜单 中 执行 “复制 ”命令 。 
(3 ) 选择 要 粘贴 单元 格 的 位 置 。 
和 若 要 用 剪贴 板 中 的 单元 格 蔡 换 现 有 的 单元 格 ， 应 选择 一 组 与 剪贴 板 上 的 单元 格 具 有 相同 布局 的 现 
有 单元 格 。 如 果 复 制 或 剪 切 了 一 块 3 x 2 的 单元 格 ， 则 可 以 选择 另 一 块 3 x 2 的 单元 格 ， 通 过 粘贴 
进行 替换 。 
外 若 要 在 特定 单元 格 所 在 行 粘贴 一 整 行 单元 格 ， 则 单 击 该 单元 格 。 
Y 若 要 在 特定 单元 格 左 侧 粘贴 一 整 列 单元 格 ， 则 单 击 该 单元 格 。 
和 若 要 用 粘贴 的 单元 格 创建 一 个 新 表格 ， 应 将 插入 点 放置 在 表格 之 外 。 
(4) 将 鼠标 指针 定位 于 目标 表格 中 ， 鼠 标 右 击 目标 单元 格 ， 在 弹出 的 快捷 菜单 中 执行 “粘贴 ”命令 ， 
例如 ， 把 图 5-46 选中 的 内 容 粘 贴 到 图 5-47 表格 的 相同 位 置 ， 把 选中 内 容 复制 到 剪贴 板 ， 然 后 把 鼠 
标 指针 定位 到 目标 的 第 1 行 第 1 列 单元 格 内 ， 执 行 “ 粘 贴 ” 命 令 。 
如 果 目 标 表 格 中 没有 足够 的 列 数 来 容纳 源 单元 格 ， 将 弹出 如 图 5-48 所 示 的 出 错 信息 。 提 示 用 户 目标 
表格 没有 足够 的 单元 格 ， 无 法 完成 粘贴 动作 。 


Dreamweaver 本 
不 能 完成 粘贴， 因为 要 由 板 与 所 先 内 容 不 符 . 
葛 贴 板 包 括 2 行 和 2 列 ， 
但 所 选 内 容 包含 3 行 和 1 列 ， 
.3 | 
ee 三 三 三 
图 5-46 源 表格 图 5-47 目标 表格 图 5-48 出错 信息 


名 注意 : 如 果 剪 贴 板 中 的 单元 格 不 到 一 整 行 或 一 整 列 ， 单 击 目标 单元 格 并 粘贴 时 ， 则 目标 单元 
格 与 它 相 邻 的 单元 格 可 能 被 粘贴 的 单元 格 替换 ( 根据 它们 在 表格 中 的 位 置 )。 如果 选择 了 整 行 或 整 列 ， 
然后 选择 “编辑 ”|“ 剪 切 ”命令 ， 将 从 表格 中 删除 整个 行 或 列 ， 而 不 仅仅 是 单元 格 的 内 容 。 


5.2.8 ”上 机 练习 


哆 练习 目标 


在 表格 中 输入 数据 或 插入 图 像 的 方法 很 简单 ， 先 将 鼠标 指针 放置 在 需要 插 。 5 3 工 机 练习 在 音 
入 数据 的 单元 格 中 ， 然 后 直接 输入 数据 或 插入 图 像 。 通 过 本 节 练习 ， 进 一 步 熟 和 
悉 表格 、 单 元 格 的 基本 操作 ， 掌 握 设置 单元 格 背景 图 像 、 在 单元 格 中 添加 内 容 的 方法 。 
设计 电路 

本 例 在 5.2.7 节 上 机 练习 制作 的 页 面 布局 中 添加 内 容 ， 完 善 网 页 。 首 先 在 “属性 ”面板 上 设置 


在 单元 格 中 添加 内 容 


让 
Ex 


091 


082 
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i 
内 容 的 对 齐 方 式 ， 然 后 在 单元 格 中 插入 图 像 ， 通 过 定义 CSS 规则 设置 单元 格 的 背景 图 像 。 最 后 在 嵌 套 表 
格 中 插入 导航 图 像 和 文本 ， 并 定义 CSS 规则 设置 文本 格式 。 最 终 的 页 面 效果 如 图 5-49 所 示 。 


乐 图 花园 中 心 是 由 大 连 心动 纺 商 贸 有 限 公 司 全 面 
引进 源 于 欧 测 的 新 型 商业 至 坊 -下 花 团 中 心 而 创办 
的 国内 第 一 批复 合式 体验 式 国 艺 用 品 连 镇 店 。 床 
店 位 于 文化 扎 加 浓厚 的 大 连 市 高 新 加 区 ， 室 内 面 
和 2000 王 方 未 ， 室 外 面积 500 干 方 未 ， 包 含 体验 


花园、 鲜花 坊 、 花 园 加 嘲 包 与 乡村 餐厅 、 回 艺 用 
品 、 家 具 用 品 、 有 机 项 茉 ， 环 保 产品 等 酸 务 ， 是 
本 条 地 区 最 大 的 全 新 模 式 的 花园 用 品 店 。 


Nd 


图 5-49 页 面 效果 


户 为 操作 上 机 


1. 打开 文件 
执行 “文件 ” |“ 打开” 命令 ,打开 已 设计 好 的 布局 网 页 ,如 图 5-50 所 示 。 然 后 执行 “文件 ”| “另存 为 ” 
命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 输入 文件 名 称 。 
2. 插入 图 像 
将 鼠标 指针 放 在 第 1 行 单元 格 中 ,执行 “插入 "| "图 像 ”命令 ,在 弹出 的 对 话 框 中 选择 需要 的 图 像 文件 ， 
单 击 “确定 ”按钮 插入 图 像 ; 选中 第 2 行 第 1 列 的 单元 格 , 使 用 同样 的 方法 插入 图 像 ; 同样 的 方法 在 最 后 
一 行 单元 格 中 插入 图 像 ， 如 图 5-51 所 示 。 


图 5-50 页面 布局 图 5-51 插入 图 像 


3. 在 第 一 个 谋 套 表格 中 插入 图 像 
将 鼠标 指针 放 在 嵌 套 表格 第 1 列 单元 格 中 ,执行 “插入 ”| “图 像 ”命令 ， 在 弹出 的 对 话 框 中 选择 需要 
的 图 像 文件 ， 单 击 “ 确 定 ”按钮 插入 图 像 ; 使 用 同样 的 方法 在 第 2 列 单元 格 中 插入 图 像 ， 如 图 5-52 所 示 。 
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图 5-52 在 衬 套 表格 中 插入 图 像 


4. 定义 单元 格 背 景 图 像 

(1) 在 第 3 行 第 2 列 单元 格 中 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”|“ 新 建 ”命令 ， 
如 图 5-53 所 示 ， 弹 出 “新 建 CSS 规则 ”对 话 框 。 

(2 ) 输入 选择 器 名 称 .bg01 ( 以 点 开头 ) ,规则 定义 位 置 为 “ 仅 限 该 文档 ”, 如 图 5-54 所 示 。 单 击 “ 确 
定 ” 按 钮 ， 弹 出 “.bg01 的 CSS 规则 定义 ”对 话 框 


人 


于 (8) » 
据 革 格式 (P) ， 
0 ， 
字体 M) ， 
样式 (5) ， 
[Ee) :Cv , | CS Es 
附加 样式 表 ( 生 … 读 程 及 类 型 : 确定 
为 css 需 m 择 上 下 文选 择 器 类 型 Em 
» EXE ED = | 
旋 笃 名 各: 
过 所 开 销 入 选择 各 和。 
bol - 
打开 履 玉 页 加 (0 NE 
滞 加 到 匡 公 收 大 (月 
创建 新 代码 片断 (C) 
不 丸 具体 更 具体 
规 刚 宗 : 
A 过 生生 Xmlb9 们 置 
| 一 一 EE | 
图 5-53 ”右键 快捷 菜单 图 5-54 设置 “新 建 CSS 规则 ”对 话 杠 


(3 ) 在 “背景 ”分 类 中 , 单 击 “浏览 ”按钮 选择 背景 图 像 ,图 像 不 重复 ( no-repeat ), 图 像 位 置 水 平 “left” 
( 左 ), 垂直 “top”( 顶端 )， 如 图 5-55 所 示 


.bg01 的 CSS 规则 十 义 [| 


图 5-55 设置 背 胡 图 像 及 图 像 的 显示 方式 
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(4) 在 “属性 ”面板 上 设置 单元 格 “ 宽 ”为 713,“ 高 ”为 354, 然后 在 “目标 规则 ”下 拉 列 表 中 选 
.bg01， 如 图 5-56 所 示 。 
应 用 背景 图 像 后 的 页 面 效 果 如 图 5-57 所 示 。 


崖 
第 


图 5-56 设置 单元 格 宽 和 高 ， 并 应 用 规则 图 5-57 ”设置 单元 格 的 背山 图 像 


5. 插入 图 像 
在 第 2 行 第 7 列 单元 格 中 单 击 ,然后 执行 “插入 "| 图像 "命令 ,在 弹出 的 对 话 框 中 选择 需要 的 图 像 文件 。 
如 图 5-58 所 示 


图 5-58 插入 图 像 


6. 设置 单元 格 背 景 图 像 
在 第 二 个 嵌 套 表格 的 第 1 列 单元 格 中 单 击 鼠 标 右键 ， 按 照 第 4 步 的 方法 设置 单元 格 背 景 ， 如 图 5-59 
和 图 5-60 所 示 。 指 定 背 景 图 像 后 的 页 面 效果 如 图 5-61 所 示 


ee 


.bg02 的 CSS 规则 定义 


图 5-59 设置 背景 图 像 及 显示 方式 2 
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na 


图 5-60 ”应 用 定义 的 规则 图 5-61 指定 背 央 图 像 后 的 页 面 效果 


7. 插入 图 像 

将 鼠标 指针 放 在 第 6 步 设置 背景 图 像 的 单元 格 中 ,执行 “插入 "| “图 像 ” 命令 ,插入 图 像 。 同 样 的 方法 ， 
在 其 他 单元 格 中 插入 图 像 和 导航 图 片 ， 如 图 5-62 所 示 。 

8. 嵌 套 表格 

将 鼠标 指针 放 在 第 3 行 第 2 列 的 单元 格 中 ,在 “属性 ”面板 上 设置 单元 格 内 容 水 平 “ 居 中 对 齐 ”， 
垂直 “居中 ”， 然 后 执行 “插入 ”|“ 表 格 ” 命 令 ， 在 弹出 的 “表格 ”对 话 框 中 设置 行 数 为 1， 列 为 1， 
表格 宽度 为 550 像素 , 边框 粗细 和 单元 格 间距 均 为 0, 单元 格 边 距 为 30, 如 图 5-63 所 示 。 单 击 “ 确 定 ” 
按钮 插入 表格 。 


图 5-62 ”插入 图 像 的 效果 图 5-63 设置 “表格 ”对 话 框 


9. 输入 文本 并 格式 化 
将 鼠标 指针 放 在 柑 套 表格 中 ， 直 接 输 入 需要 的 文本 ， 如 图 5-64 所 示 。 选 中 文本 ,在 “属性 ”面板 中 
设置 字体 为 “楷体 "， 大 小 为 22， 如 图 5-65 所 示 。 
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规则 定义 代码 中 添加 如 下 两 行 代码 : 


存 ” 


图 5-65 设置 文本 格式 


10. 设置 行距 和 字体 加 粗 
单 击 文档 工具 栏 上 的 “代码 ”按钮 ， 切 换 到 “代码 ”视图 , 在 .bg01 (定义 第 一 个 单元 格 背景 图 像 ) 


line-height: 150%} // 定义 行距 

font-weight: bold; // 定义 字体 加 粗 

如 图 5-66 所 示 ， 

11. 保存 文件 

单 击 “ 属 性 ”面板 上 的 “刷新 ”按钮 ,然后 执行 “文件 ”|“ 保 图 5-66 设置 行距 和 字体 如 相 


命令 保存 文件 。 最 终 效 果 如 图 5-49 所 示 


5.3 ”表格 的 其 他 操作 
在 实际 工作 中 ， 有 时 需要 把 其 他 应 用 程序 ( 如 Microsoft Excel ) 建立 的 表格 数据 发 布 到 网 上 。 幸 好 


Dreamweaver CC 2018 具备 导入 表格 式 数 据 的 功能 ， 用 户 只 需要 把 表格 数据 保存 为 带 分 隔 符 格式 的 数据 ， 
然后 导入 到 Dreamweaver CC 2018 中 ， 即 可 用 表格 重新 对 数据 进行 格式 化 ， 这 样 大 大 地 方便 了 网 页 制作 
的 过 程 ， 并 能 有 效 地 保证 数据 的 准确 性 。 同 样 ， 用 户 也 可 以 把 在 Dreamweaver CC 2018 中 制作 好 的 表格 
数据 导出 为 文本 文件 。 


5.3.1 上 机 练习 一 一 导 人 表格 式 数据 


< 穆 习 目标 


通过 将 使 用 逗号 分 隔 符 的 文本 数据 导入 Dreamweaver CC 2018 的 练 ”5-4 上 机 练习 一 一 导入 表格 式 数据 
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习 ， 熟 悉 导 入 表格 式 数据 的 设置 方法 。 
到 设计 思路 

新 建 一 个 带 表 格式 数据 的 文本 文件 ， 然 后 使 用 “导入 表格 式 数据 ”对 话 框 设 置 导入 数据 的 定 界 符 和 
表格 属性 。 


户 为 操作 步 机 


(1) 在 记事 本 中 创建 一 组 以 逗号 为 分 隔 符 的 数据 , 如 图 5-67 所 示 。 然 后 执行 “文件 ”|“ 保 存 ” 命 令 
将 文件 保存 为 tablel.txt。 
) 启动 Dreamweaver CC 2018， 执 行 “文件 ”|“ 新 建 ” 命 令 ， 新 建 一 个 空白 的 HTML 
文件 。 
3 ) 将 鼠标 指针 放 在 要 导入 表格 式 数据 的 位 置 ,执行 “文件 ” | “导入 ”| “表格 式 数据 ”命令 ,弹出 “ 导 
人 表格 式 数据 ”对 话 框 ， 如 图 5-68 所 示 。 


本 tablel -记事 本 
文件 日 “ 编 句 (E) 格式 (O) 查看 (V) 如 助 (H) 


图 5-67 数据 文件 图 5-68 “导入 表格 式 数据 ”对 话 杠 
(4) 单 击 “ 数 据 文件 ” 右 侧 的 “浏览 ”按钮 ， 找 到 需要 导入 的 数据 源 文件 tablel.txt。 
(5 ) 在 “ 定 界 符 ” 下 拉 列 表 中 选择 数据 源 文件 中 数据 的 分 隔 方式 。 本 例 选 择 “ 逗 号 "。 
如 果 选 择 了 “其 他 "， 则 应 在 下 拉 列 表 右 侧 的 文本 框 中 输入 分 隔 表格 数据 的 分 隔 符 。 


嫩 注意 : 如 果 不 指定 文件 所 使 用 的 分 隔 符 ， 文 件 将 不 能 正确 导入 ， 数 据 也 不 能 在 表格 中 正确 格 
式 化 。 


Y 匹配 内 容 : 可 长 让 芭 沁 定 表格 觉 度 。 
9 设置 为 : 在 右 侧 的 文本 框 中 输入 表格 宽度 数值 ， 并 指定 宽度 的 计量 
0 并 将 边框 设置 为 1。 EE Ee 
a 8 下 拉 列 表 中 设置 表格 第 1 行内 容 的 样式 。 本 例 选中 人 
(9 ) 单 击 “ 确 定 ”按钮 ， 即 可 导入 表格 数据 ， 效 果 如 图 5-69 所 示 。 图 5 -69 导入 数据 后 的 效果 
5.3.2 ”导出 表格 数据 


在 Dreamweaver CC 2018 中 ， 可 以 将 表格 数据 导出 到 文本 文件 中 ， 相 邻 单元 格 的 内 容 由 分 隔 符 隔 开 。 


“ 庭 价 厂 量 | 
3 开发 35 8 | 
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使 用 的 分 隔 符 有 逗号 、 引 号 、 分 号 、 空 格 。 


嫩 注意: 导出 表格 数据 针对 的 是 整个 表格 ， 不 能 选取 表格 的 一 部 分 导出 。 如 果 只 需要 表格 中 的 
某 些 数据 ， 则 应 创建 一 个 新 表格 ， 将 所 需要 的 信息 复制 到 新 表格 中 ， 再 将 新 表格 导出 。 


把 鼠标 指针 定位 在 表格 中 的 任意 单元 格 中 ,选择 “文件 ”|“ 导 | ds [| 
出 ” |“ 表格 ”命令 ， 即 弹出 “导出 表格 ”对 话 框 ， 如 图 5-70 
所 示 。 


和 定 界 符 : 设置 表格 数据 输出 到 文本 文件 后 的 分 隔 符 。 
换行 符 : 设置 表格 数据 输出 到 文本 文件 后 的 换行 方 
式 。 不 同 的 操作 系统 具有 不 同 的 文本 行 结 束 方式 。 其 中 


“Windows” 表 示 按 Windows 系统 格式 换行 ;“Mac” 表 示 图 5-70 “导出 表格 ”对 话 框 
按 苹果 公司 的 系统 格式 换行 ;“UNIX” 表 示 按 UNIX 的 系 
统 格 式 换行 。 
a 导出 : 单 击 该 按钮 弹出 “表格 导出 为 ”对 话 框 ， 输 入 文件 名 称 和 路 径 后 单 击 “ 保 存 ” 按 钮 即 可 将 
表格 输出 为 数据 文件 ， 


5.3.3 ”表格 数据 排序 
Dreamweaver CC 2018 也 有 类 似 Excel 的 表格 排序 功能 ， 这 种 功能 可 以 轻松 处 理 大 量 信息 的 排序 


问题 
将 鼠标 指针 放置 在 需要 排序 的 表格 中 , 执行 “编辑 ”| “表格 ”| “排序 表格 ”命令 , 弹出 “排序 表格 " 
对 话 框 ， 如 图 5-71 所 示 。 设 置 完成 后 ， 单 击 “ 应 用 “确定 ” 按 包 


排序 表格 [eis] 


图 5-71 “排序 表格 ”对 话 框 


辣 注意 : 包含 合并 单元 格 的 表格 不 能 使 用 “排序 表格 ”命令 排序 。 


外 排序 按 : 选择 最 先 需 要 排序 的 列 。 
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Y 顺序 : 设置 排序 的 方式 。 其 中 ,“ 按 字母 排序 ”表示 按 字母 的 方式 进行 排序 ;“ 按 数字 排序 ”表示 
按 数 字 本 身 的 大 小 作为 排序 的 依据 。“ 升 序 ” 表 示 字 母 从 A~Z 排列 ,数字 从 0~9 排列 ;“ 降 序 ” 表 
示 字 母 从 Z~A 排列 ， 数 字 从 9-0 排列 。 


i 注意 : 当 列 的 内 容 是 数字 时 ， 选 择 “ 按 数字 顺序 "。 如 果 按 字母 顺序 对 一 组 由 一 位 或 两 位 数 
组 成 的 数字 进行 排序 ， 则 会 将 这 些 数 字 作为 单词 进行 排序 ( 排序 结果 如 1、10、2、20、3、30 )， 而 
不 是 将 它们 作为 数字 进行 排序 ( 排序 结果 如 1]、2、3、10、20、30 )。 


和 再 按 : 选择 作为 排序 第 二 依据 的 列 。 同 样 ， 可 以 在 “顺序 ”中 设置 排序 方式 和 排序 方向 。 

和 排序 包含 第 1 行 : 设置 是 否 从 表格 的 第 1 行 开始 进行 排序 。 如 果 第 1 行 是 标题 行 ， 则 不 要 选中 
该 项 。 

a 排序 标题 行 : 对 标题 行进 行 排序 。 

3 排序 脚注 行 : 对 脚注 行进 行 排序 。 

和 完成 排序 后 所 有 行 颜色 保持 不 变 : 在 排序 时 不 仅 可 以 移动 行 中 的 数据 ， 行 的 属性 也 随 之 移动 。 如 
图 5-72 所 示 。 


图 5-72 ”排序 前 、 后 的 表格 


5.4 ”实例 精 讲 一 一 制作 艺术 品 网 站 首页 
二 入 习 日 标 
通过 前 面 基础 知识 的 讲解 ， 结 合 实例 掌握 运用 表格 布局 制作 整个 页 面 的 方法 。 
/设计 思路 
本 实例 制作 一 个 艺术 品 网 站 页 面 ， 首 先 运用 表格 布局 制作 整个 页 面 的 外 部 框架 ， 右 侧 正文 区 域 分 为 


左 、 右 两 个 部 分 , 运用 嵌 套 表格 进行 布局 , 通过 使 用 CSS 规则 创建 各 部 分 的 边框 。 最 终 页 面 效果 如 图 5-73 
所 示 。 


剖 制作 重点 
(1 ) 表格 和 单元 格 相 关 属 性 的 设置 方法 。 
(2 ) 嵌 套 表格 的 制作 方法 ， 以 及 拆 分 合并 单元 格 的 操作 。 
(3 ) 通过 设置 背景 图 像 横向 或 纵向 重复 创建 区 域 边 框 。 
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当 点 SS 秒 。。。 联 系 委 们 


图 5-73 最 终 页 面 效 果 


户 为 操作 步骤 


5.4.1 设计 网 页 基本 框架 
1. 设置 页 面 属性 5-5 “设计 网 页 基本 框架 
执行 “文件 ”| “新建 ” 命 令 ， 新 建 一 个 空白 的 HTML 文件 。 然 后 执行 “文件 ”|“ 页 面 属性 ”命令 ， 

打开 “页 面 属性 ”对 话 杠 
(1) 字体 、 字 号 : 页 面 字体 为 “新 宋体 ”， 大 小 为 13px; 

(2 ) 背景 图 像 : 单 击 “ 浏 览 ”按钮 ， 在 弹出 的 对 话 框 中 选择 背景 图 像 ; 
(3 ) 页 边 距 : 设置 四 个 边 距 均 为 0， 如 图 5-74 所 示 


页 面 屋 性 [| 


图 5-74 设置 页 面 属 性 
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2. 插入 表格 

执行 “插入 ”|“ 表 格 ” 命 令 , 在 弹出 的 “表格 ”对 话 框 中 设置 行 数 为 8, 列 为 7, 表格 宽度 为 875 像素 ， 
边框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 为 0， 如 图 5-75 所 示 。 单 击 “ 确 定 ” 按 钮 插入 表格 ， 在 “属性 ” 
面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “居中 对 齐 "，ID 为 main。 

3. 合并 单元 格 

按 住 Shift 键 依次 单 击 第 1 行 第 1 列 和 第 7 行 第 1 列 选中 单元 格 ， 然 后 单 击 “ 属 性 ”面板 上 的 “ 合 
并 所 选单 元 格 ”按钮 ， 合 并 单元 格 。 同 样 的 方法 ， 合 并 第 2 列 的 单元 格 ; 合并 第 1 行 、 第 2 行 、 第 3 行 、 
第 7 行 的 其 他 单元 格 ; 合并 第 4 行 第 4 列 至 第 6 列 单元 格 ， 效 果 如 图 5-76 所 示 。 


Table 区 本 


图 5-75 设置 “Table”( 表格 ) 对 话 框 图 5-76 合并 单元 格 的 效果 


4. 插入 谋 套 表格 

选中 合并 后 的 第 1 列 单元 格 ， 在 “属性 ”面板 上 设置 单元 格 内 容 水 平 “ 左 对 齐 *， 垂 直 “ 顶 端 "， 执 
行 “ 插 入 ”| “表格 ”命令 弹出 “表格 ”对 话 框 。 设 置 行 数 为 3， 列 为 3， 表格 宽度 为 203 像素 , 边框 粗细 、 
单元 格 边 距 和 单元 格 间距 均 为 0。 单 击 “ 确 定 ”按钮 关闭 对 话 框 ， 如 图 5-77 所 示 。 


图 5-77 插入 嵌 套 表格 


5. 编辑 嵌 套 表格 

在 第 1 行 第 1 列 单元 格 中 按 下 鼠标 左 键 拖 动 到 第 3 列 单元 格 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜 
单 中 选择 “表格 ”|“ 合 并 单元 格 ” 命 令 ， 合 并 第 1 行 。 同 样 的 方法 ， 合 并 第 2 行 单元 格 ， 如 图 5-78 
所 示 。 


图 5-78 合并 单元 格 
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6. 插入 图 像 
选中 第 1 行 单元 格 , 设置 单元 格 内 容 垂 直 “ 顶 端 ”对 齐 , 然后 执行 “插入 ”|“ 图 像 ”命令 , 插入 
同样 的 方法 ,在 第 2 行 第 2 列 和 第 3 列 、 第 3 行 插入 图 像 。 此 时 的 页 面 效果 如 图 5-79 所 示 。 


7. 设置 导航 栏 背景 
(1) 在 第 2 行 第 2 列 单元 格 中 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”|“ 新 建 ” 


图 像 。 


命令 ， 


弹出 “新 建 CSS 规则 ”对 话 框 。 设 置 选 择 器 类 型 为 “类 ”， 选 择 器 名 称 为 navbg， 规 则 定义 位 置 为 “ 仅 


限 该 文档 "， 如 图 5-80 所 示 。 


医 画 
确定 

规则 选择 上 下 文选 择 器 类 型 。 

Es 二 Em 寺 二 二- 习 [2] 
和 和 区 入 寺中 名 条。 

的 A 

不 太 有 具体 更 具体 
规 刚 宗 义 : 
选择 定义 规 R 的 位 置 。 
图 5-79 页面 效果 图 5-80 ”定义 CSS 规则 


(2 ) 单 击 “ 确 定 ” 按 钮 打开 对 应 的 规则 定义 对 话 框 ,在 “背景 " 分 类 中 单 击 “ 浏 览 ” 按钮 设置 背景 图 像 ， 


且 图 像 不 重复 (no-repeat )， 如 图 5-81 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 


lam 


.navbg 的 CSS 规则 定义 


5.6/images/main_05.gif 


no-repeat 


left 


图 5-81 定义 CSS 属性 


(3 ) 将 鼠标 指针 放 在 第 2 行 第 2 列 单元 格 中 ,在 “属性 ”面板 上 设置 单元 格 宽 为 79， 然后 在 
规则 ”下 拉 列 表 中 选择 .navbg， 如 图 5-82 所 示 。 设 置 布局 表格 main 的 第 2 列 宽 为 16, 第 1 行 第 
元 格 高 为 49， 此 时 的 页 面 效 果 如 图 5-83 所 示 。 


“目标 
3 列 单 
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图 5-82 选择 目标 规则 图 5-83 ”设置 单元 格 背 贿 图 像 的 效果 


8. 添加 logo 和 菜单 

(1) 选中 第 2 行 第 3 列 单元 格 ， 设 置 单元 格 内 容 垂 直 “ 顶 端 ”， 然 后 执行 “ 插 人 ”|“ 表 格 ” 命 令 ， 
设置 表格 行 数 为 1， 列 为 4， 表格 宽度 为 100%， 边 框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 为 0， 如 图 5-84 
所 示 。 单 击 “确定 ”按钮 插入 表格 。 

(2 ) 选中 髓 套 表格 的 所 有 单元 格 ， 在 “属性 ”面板 上 设置 单元 格 内 容 水 平 “ 左 对 齐 ”， 垂 直 “ 底 部 ”， 
然后 在 第 1 列 单元 格 中 插入 图 像 ， 在 第 2 列 至 第 4 列 单元 格 中 输入 菜单 项 ， 如 图 5-85 所 示 。 
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图 5-84 设置 “Table”( 表格 ) 对 话 框 图 5-85 ”插入 logo 和 荣 单 项 


9. 制作 页 肢 

(1 ) 选中 最 后 一 行 单 元 格 ， 设 置 单元 格 内 容 垂直 “顶端 ”对 齐 ， 然 后 执行 “插入 ”|“Table”( 表格 ) 
命令 ， 设 置 行 数 为 2， 列 为 3， 表 格 宽度 为 100%, 边框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 为 0， 如 图 5-86 
所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

(2 ) 合并 第 1 行 单元 格 ， 单 击 鼠 标 右键 ， 选 择 “CSS 样式 ”|“ 新 建 ”快捷 命令 ， 弹 出 “新 建 CSS 规 
对 话 框 。 设 置 选 择 器 类 型 为 “类 ”， 选 择 器 名 称 为 .footline， 如 图 5-87 所 示 。 单 击 “ 确 定 ” 按 钮 弹出 

应 的 规则 定义 对 话 框 。 

(3 ) 在 “背景 ”分 类 中 单 击 “浏览 ”按钮 选择 背景 图 像 , 且 图 像 横向 重复 ( repeatx ), 如 图 5-88 所 示 。 
单 击 “ 确 定 ”按钮 关闭 对 话 框 。 
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新 建 CSS 规则 


“ 


选择 回 类 型 : 
为 Css 规则 选择 上 下 文选 择 器 类 型 。 


选择 回 名 称 : 
选择 或 输入 选择 器 名 称 * 


类 《可 应 用 于 任何 区 虹 元 素 ) CR 


ES， 


不 太 具体 更 具体 


图 5-86 设置 “Table”( 表格 ) 对 话 框 


-footline 的 CSS 规则 定义 Es 


图 5-87 新 建 CSS 规则 


5S.6/images/main_70.gif 


repeat-x 


图 5-88 


(4) 选中 合并 后 的 第 1 行 单元 格 ， 在 “属性 ” 
择 .footline， 如 图 5-89 所 示 


应 用 规则 后 会 发 现 ， 单 元 格 填充 的 高 度 大 于 指定 的 4 像素 。 
为 单元 格 中 有 空格 。 接 下 来 的 操作 用 于 删除 单元 格 中 多 余 


这 是 因 
的 空格 。 

(5 ) 将 鼠标 指针 放 在 单元 格 中 , 单 击 文档 
按钮 ， 切 换 到 “ 拆 分 ”视图 。 在 “代码 ”视图 
针 所 在 位 置 有 一 个 空格 的 实体 参考 &nbsp:， 如 图 
键 删除 。 然 后 单 击 “ 属 性 ”面板 上 的 “刷新 ” 


1 第 2 行 第 2 列 水 平 “居中 对 齐 ” 


垂直 “顶端 "; 


设置 背 骨 图 像 


面板 上 设置 高 度 为 4; 在 “目标 规则 ”下 拉 列 表 中 选 


- 具 栏 上 的 “ 拆 分 ” 
中 可 以 看 到 鼠标 指 


图 5-89 


应 用 目标 规则 


5-90 所 示 。 在 “代码 ”视图 中 选中 &nbsp;， 按 Delete 


安 钮 。 
(6) 设置 第 2 行 单元 格 的 对 齐 方 式 。 选 中 第 2 行 第 


列 单元 格 ,在 “属性 ”面板 上 设置 水 平 “ 左 对 
,垂直 “居中 ”; 第 3 行 第 3 列 水 平 “ 右 对 齐 ”, 垂 直 * 顶 


所 示 。 


然后 分 别 在 第 1 列 和 第 3 列 单元 格 中 插入 医 


像 ， 在 第 2 列 单元 格 中 输入 文本 ， 效 果 如 图 5-91 
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图 5-90 在 “代码 ”视图 中 删除 多 余 的 空格 


MR al 


10. 保存 文件 
选中 第 3 行 单元 格 ， 在 “属性 ”面板 上 设置 “ 
的 “另存 为 ”对 话 框 中 输入 文件 名 称 ， 单 击 


5.4.2 ”设计 正文 区 域 布局 


“保存 ”按钮 保存 文件 


1. 定义 左上 角 的 背景 图 像 


(1) 选中 第 4 行 第 3 列 单元 格 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “CSS 


图 5-91 页 面 效果 


高 ”为 26， 然 后 执行 “文件 ”|“ 保 存 ” 命 令 


pi YY, 


在 弹出 


样式 "| “新 建 "命令 ,在 弹出 的 “新 建 CSS 规则 ”对 话 框 中 设置 选择 器 类 型 为 “类”， “6 设计 正文 区 域 布局 


选择 器 名 称 为 .lefttop， 如 图 5-92 所 示 
新 建 CSS 规则 —— 
er a 二 二 -二 
-| 
旋 笃 器 名 称 : 
选择 或 输入 选择 器 名 称 。 
人 
规 刚 宗 义 : 
选择 定义 规 由 9 位置 。 I 
i 加 el| 
图 5-92 设置 “新 建 CSS 规则 ”对 话 框 
(2 ) 单 击 “ 确 定 ” 按 钮 ,弹出 对 应 的 规则 定义 对 话 框 ,在 “背景 ”分 类 中 单 击 “浏览 ”按钮 选择 背景 图 
像 ， 且 图 像 不 重复 ( no-repeat ); 图 像 显示 位 置 为 水 平 “left”( 左 )， 垂 直 “top”( 顶端 )， 如 图 5-93 所 示 。 
单 击 “确定 ”按钮 ， 关 闭 对 话 框 。 
(3 ) 在 “属性 ”面板 上 设置 单元 格 “ 宽 ”为 12,“ 高 ”为 10， 然 后 在 “目标 规则 ”下 拉 列 表 中 选择 
.lefttop， 如 图 5-94 所 示 。 
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图 5-93 定义 CSS 属性 图 5-94 应 用 规则 


2. 定义 其 他 三 个 角 的 背景 图 像 

选中 第 4 行 第 5 列 单元 格 ， 按 照 上 一 步 的 方法 新 建 CSS 规则 righttop ， 定 义 的 属性 如 图 5-95 所 示 ; 
选中 第 6 行 第 3 列 单元 格 ， 定 义 CSS 规则 .leftbottom， 如 图 5-96 所 示 ; 选中 第 6 行 第 5 列 单元 格 ， 定 义 
CSS 规则 .rightbottom， 如 图 5-97 所 示 


-righttop 的 CSS 规则 定义 ED 


mages/main_14.png 


no-repeat 


图 5-95 定义 righttop 规则 


Jeftbottom 的 CSS 规则 定义 | 


图 5-96 定义 .Jeftbottom 规则 
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rightbottom 的 CSS 规则 定义 [Ez 


图 5-97 定义 rightbottom 规则 


3. 定义 边框 样式 

选中 第 4 行 第 4 列 单元 格 ， 按 照 第 1 步 的 方法 新 建 CSS 规则 .topline， 定 义 的 属性 如 图 5-98 所 示 ; 
选中 第 6 行 第 4 列 单元 格 ， 定 义 CSS 规则 .bottomline， 如 图 5-99 所 示 ; 选中 第 5 行 第 3 列 单元 格 ， 定 义 
CSS 规则 .leftline, 如 图 5-100 所 示 ; 选中 第 6 行 第 5 列 单元 格 , 定义 CSS 规则 .rightline, 如 图 5-101 所 示 。 


Ls 


:topline 的 CSS 规则 定义 


S.Sfimages/main_12.png 


repeat-x 


.bottomline 的 CSS 规则 定义 PE 


图 5-99 ”定义 .bottomline 规则 
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Jeftline 的 CSS 规则 定义 


fimages/main_19.png 


repeaty 


It 


图 5-100 ”定义 .leftline 规则 


| Jightline 的 css 规则 定义 


S.6/images/main_61.png 


repeaty 


right 


图 5-101 定义 rightline 规则 


向 刘 RR 和 A 全 
应 用 规则 后 的 


页 面 效 果 如 图 5-102 所 示 


而 豆 


由 六 页 站 所 时 转 。。 闻 系 我 们 


图 5-102 应 用 规则 后 的 页 面 效果 


4 . 插入 谋 套 表格 content 
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将 鼠标 指针 放 在 第 5 行 第 4 列 单元 格 中 , 在 “属性 ”面板 上 设置 单元 格 背景 颜色 为 白色 (在 FFFFF )， 


设置 表格 ID 为 content。 
5. 插入 栏目 标题 


选中 第 1 行 单元 格 ,在 “属性 ”面板 上 设置 水 平 “ 左 对 齐 "” ,垂直 “顶端 "。 执 行 “ 插 入 ”| “图 像 ” 命 令 ， 


垂直 “顶端 ”对 齐 , 然后 执行 “插入 ”|“ 表 格 ” 命 令 , 设置 行 数 为 5, 列 为 1, 宽度 为 458 像素 , 边框 粗细 、 
单元 格 边 距 和 单元 格 间距 均 为 0 ， 如 图 5-103 所 示 。 单 击 “确定 ”按钮 关闭 对 话 框 ， 在 “属性 ”面板 上 


在 第 1 行 单元 格 中 插入 需要 的 栏目 标题 。 同 样 的 方法 在 第 3 行 单元 格 中 插入 图 像 ， 如 图 5-104 所 示 。 


Table Ex 


图 5-103 设置 “Table”( 表格 ) 对 话 框 


6. 定义 边线 样式 


(1) 选中 第 5 行 单元 格 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ” |“ 新 建 "命令 ,弹出 “新 
建 CSS 规则 ”对 话 框 , 选择 器 类 型 为 “类 ”, 名 称 为 .line, 单 击 “ 确 定 ” 按 钮 打开 对 应 的 规则 定义 对 话 框 。 
在 “背景 ”分 类 中 单 击 “ 浏 览 ”按钮 ， 选 择 背 景 图 像 ， 且 图 像 横 向 重复 (repeat-x )， 如 图 5-105 所 示 。 单 


击 “ 确 定 ”按钮 关闭 对 话 框 


图 5-104 插入 栏目 标题 


Jine 的 CSS 规则 定义 


图 5-105 ”设置 背影 图 像 
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(2 ) 将 鼠标 指针 放 在 第 5 行 单元 格 中 ,在 “属性 ”面板 上 设 
置 单 元 格 “ 高 ”为 1， 然 后 在 “目标 规则 ”下 拉 列 表 中 选择 .line， 
如 图 5-106 所 示 。 

(3 ) 单 击 文档 工具 栏 上 的 “ 拆 分 ”按钮 ， 切 换 到 “ 拆 分 ” 视 


图 。 在 “代码 ”视图 中 选中 单元 格 中 多 余 的 空格 , 按 Delete 键 删除 ， 图 5-106 ”应 用 规则 .line 
然后 单 击 “属性 ”面板 上 的 “刷新 ”按钮 
7. 保存 文件 


执行 “文件 ”|“ 保 存 ” 命 令 ， 保 存 文件 
5.4.3 ”添加 网 页 内 容 


1. 插入 谱 套 表格 : 

选中 表格 content 第 2 行 ,在 “属性 ”面板 上 设置 水 平 “居中 对 齐 ” ,垂直 “居中 ”; 加 
然后 执行 “插入 ”|“ 表 格 ” 命 令 , 设 置 行 数 为 4, 列 为 4, 表 格 宽度 为 100%, 边 框 粗细 、 5-7 添加 网 页 内 容 
单元 格 间距 和 单元 格 边 距 均 为 0， 如 图 5-107 所 示 。 单 击 “ 确 定 ” 按 钮 插入 表格 。 

2. 编辑 表格 

选中 第 1 列 的 所 有 单元 格 ， 单 击 “属性 ”面板 上 的 “合并 所 选单 元 格 ” 按 钮 ; 同样 的 方法 合并 第 4 
列 所 有 单元 格 ; 合并 第 1 行 单元 格 和 第 4 行 单元 格 。 然 后 在 其 他 单元 格 中 插入 图 像 和 文本 ， 如 图 5-108 
所 示 。 


Wo 


图 5-107 设置 “Table”( 表格 ) 对话 框 图 5-108 ”添加 表格 内 容 


3. 设置 竖 直 边线 样式 

(1 ) 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”|“ 新 建 ” 命 令 ,， 创建 CSS 规则 .vline， 
如 图 5-109 所 示 ， 用 于 设置 左 侧 边 线 的 样式 和 位 置 。 a 在 “属性 ”面板 上 设置 
单元 格 宽度 为 20, 在 “ "目标 规则 * 下 拉 列 表 中 选择 .vline， 应 用 样式 。 

(2 ) 用 同样 的 方法 ,设置 规则 .rvline， 如 图 5-110 所 示 ， 用 于 设置 右 侧 边线 的 样式 和 位 置 。 然 后 选中 
第 4 列 的 单元 格 , 在 “ a 面板 上 设置 宽度 为 20， 在 “目标 规则 ”下 拉 列 表 中 应 用 样式 .rvline。 

应 用 规则 后 的 显示 效果 如 图 5-111 所 示 。 
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| wine 的 CSS 规则 定义 [| 


5.6/images/main_61.gif 


repeaty 


图 5-109 ”定义 规则 .vline 


,vline 的 CSS 规则 定义 [二 


5S.6/images/main_61.gif 


repeat-y 


right 


图 5-110 ”定义 规则 .rvline 


远 高 尘世 的 喧嚣， 与 清纯 可 人 的 狐 仙 为 
亲 高 雅 。 这 是 清松 
部 车 下 超 用 脱 的 艺术 境界 。 坐 落 于 世 
界 短篇 小 说 之 王 、 清 代 着 名 文学 家 清松 
省 淄博 市 温 川 区 的 


时 堂 
这 样 非凡 的 艺术 境界 ， 为 歼 闹 国 刘 生 和 了 全 和 庆 人 半生 着 染 聊 
高 仙 气 ， 聊 高 画廊 创办 以 来 赢得 了 社会 各 界 的 广泛 关注 ， 许 多 的 古 
今 名 男 在 这 里 收藏 、 展 出 。 


图 5-111 雇 线 的 显示 效果 


4. 制作 “精品 赏析 ”栏目 


(1) 选中 表格 content 第 4 行 单元 格 ， 执行“ 插入 ”|“ 表 格 ” 命 令 ， 设置 表格 行 数 为 5， 列 为 7， 表 
格 宽度 为 100%， 如 图 5-112 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 然 后 合并 第 1 列 和 第 7 列 单元 格 ， 宽 
度 为 20, 效果 如 图 5-113 所 示 。 
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5-112 设置 “Table”( 表格 ) 对 话 框 图 5-113 合并 单元 格 的 效果 


(2 ) 按 住 Ctrl 键 选中 第 3 列 \ 第 5 列 单元 格 ,在 “属性 ” 面板 上 设置 “ 宽 ” 为 84; 然后 执行 “插入 "| “图 
像 ”命令 ,在 第 2 行 和 第 4 行 插入 图 像 ， 如 图 5-114 所 示 


图 5-114 插入 图 像 


(3 ) 按 住 Ctrl 键 选中 第 3 行 和 第 5 行 ,在 “属性 ”面板 上 设置 单元 格 “高 ”为 45, 水 平 “ 居 中 对 齐 ”， 
垂直 “居中 ”， 然 后 输入 文本 ， 效 果 如 图 5-115 所 示 。 


5. 制作 “名 家 简介 ”栏目 

(1 ) 选中 表格 content 第 5 行 第 6 列 单元 格 , 执行 “插入 ”|“ 表 格 ”命令 , 设置 表格 行 数 为 5, 列 为 3， 
表格 宽度 为 164 像素 ,边框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 为 0， 如 图 5-116 所 示 。 单 击 “ 确 定 ” 按 钮 
关闭 对 话 框 ， 然 后 合并 第 1 行 单元 格 和 第 5 行 单元 格 。 

(2 ) 合并 第 1 列 单元 格 ， 在 “属性 ”面板 上 设置 “ 宽 ” 为 12， 然 后 在 “目标 规则 ”下 拉 列 表 中 选择 
.vline; 同样 的 方法 ,合并 第 3 列 单元 格 ,应 用 规则 .rvline; 选中 第 5 行 单元 格 ,在 “属性 ”面板 上 设置 “高 ” 
为 1， 应 用 规则 .line， 效 果 如 图 5-117 (a ) 所 示 。 在 浏览 器 中 的 预览 效果 如 图 5-117 (b ) 所 示 。 
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图 5-115 输入 文本 的 效果 


Table [> 


图 5-116 设置 “Table”( 表格 ) 对 话 框 图 5-117 ”应 用 规则 的 效果 


6. 添加 网 页 内 容 
(1 ) 选中 第 2 行 第 2 列 单元 格 ， 在 “属性 ”面板 上 设置 “高 ”为 20。 
(2 ) 选中 第 3 行 第 2 列 单元 格 , 设置 单元 格 内 容 水平 “ 居 中 对 齐 ”, 垂直 “居中 ”, 然后 执行 “插入 ”| 


“图 像 ” 命 令 ， 插 入 图 像 。 


(3 ) 在 第 4 行 单元 格 中 输入 文本 ， 效 果 如 图 5-118 所 示 。 


7. 保存 文件 
执行 “文件 ”|“ 保 在” 命令， 保存 文 件 。 在 浏览 器 中 的 预览 效果 如 图 5-73 所 示 。 
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| “及 系 我 们 


版 权 所 有 ;2016-2017 深圳 记 晶 华 忌 术 公认 有 限 公司 
aa] :webaastergwebsirev con ca 


图 5-118 页面 效果 


5.5 答疑 解 惑 


1. 如 何 解决 表格 变形 的 问题 ? 

答 : 表格 变形 通常 是 因为 表格 排列 设置 不 当 引 起 的 。 

表格 的 排列 有 左 \ 中 、 右 三 种 方式 ,默认 为 居 左 排列 。 如 果 切 换 屏幕 分 辨 率 , 表 格 就 可 能 水 平方 向 变形 。 
解决 的 办 法 比较 简单 ， 即 都 设置 为 居中 ， 或 居 左 ， 或 居 右 。 

如 果 在 一 个 表格 单元 中 工人 了 另 一 个 表格 ， 切 换 屏 幕 分 辨 率 时 可 能 出 现 垂直 方向 变形 。 其 原因 在 于 ， 
嵌入 的 表格 默认 为 竖 向 居中 排列 , 其 解决 办 法 如 前 , 可 根据 情况 对 排列 进行 设置 , 而 不 是 采用 其 默认 设置 。 

2. 如 何 使 表格 布 满 整个 页 面 ? 

答 : 为 了 使 页 面 适 应 不 同 的 分 辨 率 ， 通 常 将 表格 的 大 小 按 百 分 比 设置 。 有 时 即使 把 表格 的 宽度 设置 
为 100%， 但 在 浏览 器 上 还 是 不 能 满 屏 显示 ， 四 周 会 显示 一 圈 空 白 。 这 圈 空 白 其 实 是 页 面 默认 的 边 距 ， 执 
行 “文件 一 页 面 属性 ”命令 ， 在 弹出 的 对 话 框 里 设置 页 面 左 、 右 、 上 、 下 边 距 都 为 0 即 可 。 

3. 如 何 使 用 表格 制作 一 条 宽度 为 1 像素 的 细 线 ? 

答 : 在 网 页 中 插入 一 个 1 行 1 列 的 表格 ,将 表格 的 cellpadding ,cellspacing ,边框 都 设置 为 0, 然 后 在 “ 属 
性 ”面板 上 设置 单元 格 高 度 为 1。 

接 下 来 切换 到 “代码 ”视图 ， 删 除 单元 格 标签 <td>< /td> 之 间 的 空格 ( &nbsp; ) 即 可 。 

4. 用 表格 设计 页 面 布局 出 现 空白 间隙 或 错位 ， 如 何 解决 ? 

答 : 首先 检查 表格 的 边框 、 边 距 、 填 充 等 是 否 设置 为 0。 如 果 已 设置 为 0， 还 有 空白 行 或 错位 ， 则 在 
“代码 ”视图 中 检查 单元 格 中 有 没有 多 余 的 空白 符 ， 有 则 删 掉 。 如 果 有 空白 行 ， 则 在 “代码 ”视图 的 样式 
声明 部 分 (<style> 和 </style> 之 间 ) 添加 img {vertical-align: top:}。 
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5.6 ”学 习 效 果 自 测 

一 、 选 择 题 
1. 下 列 关于 表格 的 说 法 中 错误 的 是 ( 

A. 插 入 表格 时 可 以 定义 表格 的 宽度 B. 表格 可 以 嵌 套 ,但 说 套 层 次 不 宜 过 多 

C. 表格 可 以 导入 但 不 能 导出 D. 数据 表格 可 以 排序 
2. 将 鼠标 指针 移 到 ( )， 单 击 ( ) 可 以 选中 整个 表格 。 

A. 工 具 栏 ，<table> B. 菜单 栏 ，<tr> C. 工具 栏 ，<td> D. 状态 栏 ，<table> 
3. 在 Dreamweaver CC 2018 中 ， 下 面 关 于 表格 属性 的 说 法 中 错误 的 是 ( 让 

A. 可 以 设置 宽度 B. 可 以 设置 表格 边框 的 粗细 

C. 可 以 设置 表格 的 背景 颜色 D. 可 以 设置 单元 格 之 间 的 距离 
4. 在 Dreamweaver CC 2018 的 属性 面板 中 ， 下 面 关于 单元 格 的 说 法 中 错误 的 是 ( jo 
A. 单元 格 可 以 合并 B. 单元 格 可 以 拆 分 
C. 单元 格 可 以 设置 背景 颜色 D. 可 以 设置 边框 颜色 
二 、 判 断 题 


1. 表格 可 以 导入 但 不 能 导出 。( ) 

2. 在 表格 中 ， 只 可 以 选择 连续 的 单元 格 ， 而 不 可 以 选择 非 连 续 的 单元 格 。( 

3. 一 个 3 列 的 表格 ， 表 格 边框 宽度 是 2 像素 ， 单 元 格 间距 为 5 像素 ， 单 元 格 边 距 为 3 像素 ， 单 元 格 
宽度 均 为 30 像素 ， 则 表格 的 宽度 为 138 像素 。( ) 

4. 插入 表格 时 可 以 定义 表格 的 宽度 。( ) 

三 、 填 空 题 

1. 表格 由 ( ( 人 ) 三 部 分 组 成 。 

2. 设置 表格 的 宽度 可 以 使 用 两 种 单位 ， 分 别 是 ( ) 和 ( )。 

3. 将 指针 置 于 开始 的 单元 格 内 ， 按 住 ( ) 键 不 放 ， 单 击 最 后 的 单元 格 可 以 选择 连续 的 单元 格 。 

4. 单 击 状态 栏 上 的 ( ) 标签 可 以 选择 表格 。 

四 、 操 作 题 

通过 本 章 讲 解 的 内 容 运 用 表格 布局 制作 一 个 页 面 。 


Se 


图 像 的 直观 力 是 
彩 ， 更 加 吸引 浏览 者 。 恰 当 巧 妙 地 利用 图 像 是 设计 网 页 的 关键 。 
| 本章 将 从 最 基本 的 操作 入 手 ， 通 过 对 网 页 中 的 图 像 的 插入 和 设置 
的 介绍 ， 使 读者 掌握 基本 的 图 像 网 页 的 制作 方法 : 


超级 链接 


6.1 


的 学 习 以 及 网 页 制作 不 无 神 益 。 


日 两 部 分 组 成 :一 部 分 是 在 浏览 网 页 时 可 
另 一 部 分 是 超级 链接 所 链接 的 目标 ， 可 以 是 网 页 、 图 
绍 超级 链接 中 几 个 重要 的 概念 : 绝对 路 径 、 相 对 路 径 和 根 相 对 路 径 ， 掌握 了 本 节 的 知识 点 ， 对 下 面 章节 


认识 超级 链接 


站 谣 体 


将 鼠标 移 到 产品 图 片 
| 上 ， 指 针 变 成 手 形 ， 表 
”| 明 这 是 一 个 超级 链接 的 


Err 


上 ,指针 也 会 
表明 这 也 是 
接 的 载体 

ee 
ee 
风 


图 6-1 单 击 超级 链接 的 墙 体 


6.1.1 绝对 路 径 


绝对 路 径 提 供 所 链接 文档 的 完整 URL， 而 且 包括 所 使 用 的 协议 ( 对 于 
览 器 的 地 址 栏 中 输入 https://www.microsoft.com/zh-cn， 将 打开 微软 官网 首页 ， 如 图 6-2 所 示 。 


会 变 成 手 形 ， 
一 个 超级 链 
用: 


| 


| 


| 
\ 了 将 鼠标 移 到 产品 名 称 et 
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[以 看 到 的 部 分 , 称 为 超级 链接 载体 , 如 图 6-1 所 示 ; 
片 、 视 频 、 声 音 、 电 子 邮 件 地 址 等 。 本 节 将 简要 介 


F 网 页 通常 是 http:/ )， 例 如 在 浏 


J C vicosok -Em x 


为 您 特别 推荐 的 新 电脑 


在 这 些 设备 上 ， 亲身 体验 Windows 的 非凡 顽 力 . 


了 解 为 你 特别 准 其 的 电炉 


一 台 显 示 Windows 10* 开 始 " 菜 单 的 电脑 


Windows 10 
提供 新 功能 和 党 强 功能 - 


Xbox One 
抢 评 体验 精彩 游戏 和 多 人 对 战 模式 - 


天 美景 新 X80X ONE 主机 


Surface Pro 4 设备 和 Surface 触 控 笔 


Surface Pro 4 
可 以 苦 代 笔记 本 电脑 的 平板 电脑 


天 于 SURFACE PRO 4 


网 站 反馈 


图 6-2 ”绝对 路 径 地 址 


诉 严 
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(以 知识 拓展 
什么 是 URL 

URL ( Uniform Resource Locator ) 中 文 名 称 为 “统一 资源 定位 符 ”， 简 单 地 说 ， 就 是 网 络 上 一 个 站 
点 、 网 页 的 完整 地 址 ， 相 当 于 个 人 的 通信 地 址 。 

在 网 络 上 一 个 完整 的 URL 是 : http://www.bupt.edu.cn/index.htm。 其 中 http 代表 传输 协议 ， 即 
超 文本 传输 协议 ( HyperText Transfer Protocol )， 它 与 WWW 服务 器 相对 应 ， 需 要 向 有 关机 构 申请 。 现 
在 很 多 站 点 都 提供 个 人 主页 的 存放 空间 ， 制 作 一 个 简单 的 个 人 站 点 提交 到 提供 这 种 服务 的 服务 器 上 ， 个 
人 主页 就 获得 了 一 个 完整 的 URL， 全 世界 的 访问 者 都 可 以 浏览 该 主页 了 。 

绝对 路 径 与 链接 的 源 端点 无 关 ， 只 要 网 站 的 地 址 不 变 ， 无 论文 档 在 站 点 中 如 何 移动 ， 都 可 以 正常 实 
现 跳 转 。 


绝对 路 径 也 会 出 现在 尚未 保存 的 网 页 上 ， 如 果 在 没有 保存 的 网 页 上 插入 图 像 或 添加 链接 ，Dreamweaver 
CC 2018 会 暂时 使 用 绝对 路 径 ， 如 图 6-3 所 示 。 在 网 页 保存 后 ，Dreamweaver CC 2018 会 自动 将 绝对 路 径 转 
化 为 相对 路 径 。 

尽管 对 本 地 链接 也 可 使 用 绝对 路 径 ,但 不 建议 采用 这 种 方式 , 因为 一 旦 将 此 站 点 移动 到 其 他 服务 器 上 ， 
则 所 有 本 地 绝对 路 径 链接 都 将 断 开 


6.1.2 ”相对 路 径 


文档 相对 路 径 的 基本 概念 是 省 略 对 于 当前 文档 和 链接 的 文档 都 相同 的 绝对 URL 部 分 ， 而 只 提供 不 同 
的 那 部 分 路 径 ， 可 以 给 用 户 在 站 点 内 移动 文件 提供 很 大 的 灵活 性 

如 果 当 前 文档 与 所 链接 的 文档 处 于 同一 文件 夹 内 ,直接 在 “链接 "文本 框 中 输入 文件 名 称 即 可 ,如 图 6-4 
所 示 ， 表 示 链 接 到 同一 文件 夹 中 的 lianye.html。 


ages/040908frut0l.jpg 昌国 


lianye. html DB 


图 6-3 绝对 路 径 图 6-4 ”链接 同一 文件 夹 中 的 文件 


如 果 要 链接 到 其 他 文件 夹 中 的 文档 , 则 要 利用 文件 夹层 次 结构 ,指定 从 当前 文档 到 所 链接 文档 的 路 径 ， 
如 图 6-5 所 示 。“ 链 接 ” 文 本 框 中 的 ch06/text.html 表示 从 当前 文件 链接 到 ch06 文件 夹 中 的 文件 texthtml。 

如 图 6-6 所 示 ,“ 链 接 ” 文 本 框 中 的 ../lianye.html 表示 从 当前 文件 链接 到 上 一 级 目录 中 的 文件 lianye. 
html。 


images/1113.gf 
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图 6-5 ”链接 到 其 他 文件 夹 中 的 文档 1 图 6-6 ”链接 到 其 他 文件 夹 中 的 文档 2 


6.1.3 ” 根 相 对 路 径 


根 相对 路 径 提供 从 站 点 根 文件 夹 到 文档 所 经 过 的 路 径 ， 移动 一 个 包含 根 相对 链接 的 文档 时 ， 不 需 改 
变 链接 。 适 用 于 经 常 需要 将 网 页 文件 从 一 个 文件 夹 移 到 另 一 文件 夹 的 网 站 。 
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根 路 径 以 “/” 开 始 ， 代 表 站 点 的 根 文件 夹 ， 然 后 是 根 目 录 下 的 目录 名 。 例 如 ，“/bbs/register.html” 
是 一 个 指向 文件 register.html 的 根 相 对 路 径 ， 该 文件 位 于 站 点 根 文件 夹 的 bbs 子 文件 夹 中 。 

相对 路 径 也 同样 适合 于 创建 内 部 链接 ,但 在 大 多 数 情 况 下 ， 不 建议 使 用 此 种 路 径 形式 。 通 常 只 在 以 
下 两 种 情况 下 使 用 : 

(1 ) 站 点 的 规模 非常 大 ， 放 置 在 几 个 服务 器 上 。 

(2 ) 在 一 个 服务 器 上 同 置 几 个 站 点 。 


6.2 设置 页 面 链接 


利用 超 链接 可 以 实现 文档 间或 文档 中 的 跳 转 , 将 网 站 中 众多 的 页 面 组 织 为 一 个 整体 。 在 Dreamweaver 
CC 2018 中 可 以 创建 文本 超 链接 、 图 像 超 链接 、 图 像 热 区 链接 、E-mail 链接 等 多 种 链接 形式 。 本 节 将 向 
读者 详细 介绍 在 页 面 中 创建 各 种 链接 的 方法 。 


6.2.1 上 机 练习 一 一 创建 文本 链接 
sp 全 上 村 6-1 上 机 练习 一 一 创建 
在 网 页 上 用 到 最 多 的 就 是 文本 超 链接 , 例如 , 单 击 文本 , 跳 转 到 男 一 个 页 面 。 文本 链接 


通过 本 节 的 练习 实例 ， 使 读者 掌握 创建 文本 链接 的 几 种 常用 操作 方法 。 
和 设计 思路 


首先 选中 要 添加 链接 的 文本 ， 然 后 分 别 使 用 三 种 常用 的 方法 为 文本 设置 超级 链接 ， 并 设置 链接 文件 
的 打开 方式 。 


NO 操作 步骤 

(1 ) 启动 Dreamweaver CC 2018， 执 行 “文件 ” |“ 打开 ”命令 ， 打 开 一 个 需要 添加 文本 链接 的 网 页 ， 
如 图 6-7 所 示 。 

(2 ) 在 页 面 上 拖 动 指针 选中 需要 添加 链接 的 文本 “早春 包 款 流行 趋势 早 知道 ,选择 “窗口 ”| “打开 ” 
命令 ,打开 一 个 需要 添加 文本 链接 “属性 ”菜单 命令 打开 属性 面板 。 在 “链接 ”后 的 文本 框 中 设置 链接 地 址 ， 
如 图 6-8 所 示 。 


图 6-7 打开 的 网 页 文 伞 图 6-8 输入 链接 地 址 
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得 儿 提示 : 如 果 链 接 到 站 点 外 部 ， 一 般 直接 输入 链接 的 绝对 地 址 ， 如 http://pclady.com.cn。 如 果 
要 链接 站 点 内 部 的 文件 ， 可 单 击 “链接 ”文本 框 右 侧 的 “浏览 文件 ”按钮 或 “指向 文件 ”按钮 ， 选 
择 需 要 的 文件 后 , “链接 ”文本 框 中 将 自动 填充 文档 的 相对 路 径 。 


操作 完成 后 ， 可 以 看 到 被 选择 的 文本 变 为 蓝 色 ， 并 且 带 有 下 画 线 。 在 浏览 器 中 将 鼠标 指针 移 到 文本 
上 时 ， 鼠 标 指针 变 为 手 形 ， 效 果 如 图 6-9 所 示 。 

(3 ) 在 属性 面板 上 的 “目标 ”下 拉 列 表 中 选择 打开 链接 目标 的 方式 ， 即 可 创建 超 链接 。 本 例 设 置 为 
_blank， 如 图 6-10 所 示 。 


图 6-9 超级 链接 效果 图 6-10 设置 打开 链接 的 方式 


和 _blank: 在 一 个 新 的 、 未 命名 的 浏览 器 窗口 中 打开 链接 文件 。 

Snew: 始终 在 同一 个 新 的 浏览 器 窗口 中 打开 链接 文件 。 

和 _parent; 在 链接 所 在 框架 的 父 窗口 中 打开 链接 文件 。 如 果 包 含 链接 的 框架 不 是 散 套 的 ， 则 等 同 
_top， 在 浏览 器 全 屏 窗 口中 打开 链接 文件 。 

和 _self: 是 浏览 器 的 默认 值 ， 在 当前 网 页 所 在 窗口 中 打开 链接 的 网 页 。 

站 _top: 在 整个 浏览 器 窗口 中 打开 网 页 。 


T 


电 ) 提示 : 如 果 要 链接 到 站 点 外 的 菜 一 页 面 ， 应 始终 使 用 _top 或 _blank 来 确保 该 页 面 不 会 显示 
为 站 点 的 一 部 分 。 


(4) 在 页 面 上 拖 动 鼠 标 指 针 选 中 需要 添加 链接 的 文本 “五 款 围巾 解决 单调 外 套 ” ,执行 “窗口 "| 文件” 
命令 ,打开 “文件 " 面板 ,然后 在 “属性 ” 面板 上 拖 动 “链接 ”文本 框 右 侧 的 “指向 文件 ”按钮 辆 到 “文件 ” 
面板 中 需要 的 文件 。 拖 动 鼠 标 指针 时 会 显示 一 条 带 箭头 的 线 , 指示 要 拖 动 的 位 置 , 释放 鼠标 左 键 ,“ 链 接 ” 


文本 框 中 将 自动 填充 文件 的 相对 路 径 , 如 图 6-11 所 示 。 然 后 在 “目标 "下 拉 列 表 中 选择 链接 文件 的 打开 方式 。 


图 6-11 指向 链接 文件 
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(5 ) 在 页 面 中 拖 动 鼠标 指针 选中 “石头 记 最 热卖 饰品 ”文字 内 容 ， 执 行 “窗口 ”|“ 插 入 ”命令 , 打 


开 “HTML” 插入 面板 , 单 击 “ 超 级 链接 ”按钮 图 ,如 图 6-12 所 示 。 即 会 弹出 “超级 链接 ”对 话 框 ,如 图 6-13 
所 示 。 


区 柯 
: 


图 6-12 单 击 “ 超 级 链接 ”按钮 图 6-13 “超级 链接 ”对 话 杠 


外 文本 : 设置 超 链接 显示 的 文本 

站 链接 : 设置 超 链接 的 目标 文件 

9 目标 : 设置 超 链接 的 打开 方式 ， 与 “属性 ”面板 上 的 “目标 ”下 拉 列 表 相 同 ， 

9 标题 ; 设置 超 链接 的 标题 。 在 浏览 器 中 将 鼠标 指针 移 到 超 链接 上 时 ， 显 示 标 题 文本 。 

9 访问 键 : 设置 一 个 字母 作为 键盘 等 价 键 。 在 浏览 器 中 打开 网 页 后 ， 单 击 键盘 上 的 这 个 字母 将 选中 


这 个 超 链接 。 
Tab 键 索引 : 设置 Tab 键 顺序 的 编号 
(6) 设置 “超级 链接 ”对 话 框 ， 如 图 6-14 所 示 ， 然 后 单 击 “确定 ”按钮 ， 完 成 “超级 链接 ”对 话 
框 的 设置 


(7) 执行 “文件 ” |“ 保存 ”命令 ,保存 页 面 。 按 下 键盘 上 的 F12 键 ， 即 可 在 浏览 器 中 预览 整个 页 面 ， 
如 图 6-15 所 示 。 单 击 创建 了 超级 链接 的 文字 ， 链 接 的 页 面 在 一 个 新 的 浏览 器 窗口 中 打开 ， 


个 无 本 昌文 本- Windows Internet EpL ES 
Oe mr -| *| xjg cx 


攻 。 时 尚 饰品 smore | 


Hyperlink 


上 计算 机 | 保护 模式 : 禁用 玛 ” 用 100%6 > 


图 6-14 设置 “超级 链接 ” 对 话 框 图 6-15 在 浏览 器 中 预览 页 面 


默认 情况 下 ,文本 链接 显示 为 蓝 色 ， 并 显示 有 下 夯 线 ， 如 图 6-15 所 示 。 接 下 来 修改 链接 文本 的 显 
示 样式 。 
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(8 ) 选择 “文件 ”| “页面 属性 ”命令 ， 在 “页 面 属性 ”面板 的 “链接 ( CSS )” 分 类 页 面 , 设置 “ 链 
接 颜色 "为 #833;“ 变 换 图 像 链接 "为 狂 30;“ 已 访问 链接 "为 妆 00; 并 设置 下 画 线 样式 为 “始终 无 下 画 线 ”， 
如 图 6-16 所 示 。 保 存 文件 后 ， 在 浏览 器 中 的 页 面 效 果 如 图 6-17 所 示 。 


大 天 广西- Windovs Internet bpL EPE 


一 一 一 一 
Oe vepbwwe -| 1x||® m4 
视 收 天。 | 息 无 归档 加 区 汪 


4 下 
玫 计算 机 | 保护 模式 : 禁用 给 ” 起 100%6 > 


图 6-16 设置 “页 面 属性 ”对 话 杠 图 6-17 在 浏览 器 中 浏览 页 面 效果 


6.2.2 图 像 链接 

很 多 情况 下 ， 为 了 美化 页 面 ， 网 页 设计 者 会 选择 用 图 片 代替 文本 创建 超 链接 ， 这 种 方式 适用 于 所 有 
能 识别 图 形 的 浏览 器 ， 

图 像 链接 有 两 种 : 一 种 是 指 直 接 给 整个 图 片 添加 一 个 超级 链接 ， 常 称 为 图 片 链接 ; 另 一 种 是 在 一 张 
图 片 的 多 个 局 部 添加 不 同 的 超级 链接 ， 也 就 是 图 像 映射 

1. 图 片 链接 

图 片 链接 的 创建 方法 与 文本 超级 链接 的 创建 方法 基本 相同 ， 不 同 的 是 超 链接 的 载体 为 图 片 ， 而 不 是 
文本 。 

在 文档 窗口 中 选中 图 片 ， 打 开 “ 属 性 ”面板 ， 在 “链接 ”文本 框 中 设置 链接 地 址 ， 在 “目标 ”下 拉 
列表 中 选择 链接 文档 的 打开 方式 ， 如 图 6-18 所 示 

在 浏览 器 中 预览 可 以 看 到 ， 链 接 图 片 四 周 会 显示 一 个 蓝 色 边 框 ， 效 果 如 图 6-19 所 示 。 


图 6-19 图 片 链接 显示 效果 1 


第 6 章 
超级 链接 的 应 用 


如 


得 ) 提示 : 如 果 在 页 面 中 设置 了 超级 链接 各 个 状态 的 颜色 ， 则 图 片 边框 的 显示 颜色 也 会 相应 地 
进行 变化 。 例 如 ， 设 置 了 “链接 颜色 ”为 灰色 , “变换 图 像 链 接 颜色 ”为 橙色 ， 则 图 片 链接 的 边框 


图 6-20 (b ) 所 示 。 


在 浏览 器 中 会 显示 为 灰色 ， 如 图 6-20 (a) 所 示 ; 将 鼠标 指针 移 到 链接 图 片上 时 ， 边 框 显示 为 橙色 ， 


(a) 
图 


(以 知识 拓展 


在 浏览 器 中 显示 图 片 链接 的 边框 会 影响 网 页 的 美观 。 采 用 下 面 
(1) 在 Dreamweaver 文档 了 


你 他 养生 和 鱼 汤 “ 


b 


前 中 太 少 面 纹 


| 


# 吉 你 做 养 阁 去 名册 色 汤 


6-20 ”图片 链接 显示 效果 2 


取消 图 片 链接 的 边框 


[ 具 栏 上 单 


(b) 


的 方法 可 以 取消 显示 图 片 链接 的 边框 。 


“代码 ”按钮 ， 切 换 到 “代码 ”视图 。 


(2) 在 <head> 和 </head> 标签 之 间 添加 如 下 的 代码 ， 如 图 6-21 所 示 : 


<style type="text/css"> 
img { 


} 


border-width: Opx; 


</style> 


上 述 代码 定义 了 一 个 CSS 规则 ， 将 网 页 中 的 所 有 图 片 边框 宽度 
都 设置 为 0， 即 不 显示 边框 。 读 者 也 可 以 通过 “CSS 设计 器 ”面板 以 


可 视 化 的 方式 实现 上 面 的 代码 ， 有 关 “CSS 设计 器 ”面板 的 具体 操作 


将 在 第 8 章 进行 讲解 。 


2. 


户 单 击 
在 
所 示 。 


图 像 映射 


图 像 上 不 同 热点 区 域 时 ， 就 可 以 跳 转 到 不 同 的 页 面 。 


eradministrato\Desktop\testhtml ~ Ox 


图 6-21 “代码 ”视图 


图 像 映射 就 是 用 热点 工具 将 一 幅 图 像 分 割 为 若干 个 区 域 ， 并 分 别 在 这 些 子 区 域 建 立 超级 链接 。 当 用 


Dreamweaver CC 2018 中 可 以 为 图 像 创建 热点 。 在 “属性 ”面板 中 选择 定义 热点 的 形状 ,如 图 6-22 
同时 可 以 在 图 像 上 直接 编辑 热点 ， 对 热点 大 小 与 位 置 也 可 以 进行 简单 的 设置 。 


图 6-22 


“属性 ”面板 上 的 热点 工具 
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天 夺 入 高 
国 : 选择 工具 。 用 于 选择 热点 区 域 或 热点 区 域 的 边界 顶点 。 


。 单 击 该 按钮 后 ， 在 图 像 上 按 下 鼠标 拖 动 ， 可 以 绘制 一 个 矩形 的 热点 区 域 。 
i 工具。 单 击 该 按钮 后 ， 在 图 像 上 按 下 鼠标 拖 动 ， 可 以 绘制 一 个 圆 形 的 热 
图 : 多 边 形 热点 工具 。 单 击 该 按钮 后 ， 在 图 像 上 多 次 单 击 和 鼠标 ， 这 些 点 将 依次 作为 多 边 形 的 顶点 。 


6.2.3 上 机 练习 一 一 制作 旅游 景点 地 图 


< 和 所 习 目标 


通过 本 节 的 练习 实例 ， 使 读者 掌握 在 图 像 上 创建 矩 形 热 区 、 圆 形 热 区 和 多 边 。 6-2 下 机 练习 -制作 


形 热 区 ， 以 及 编辑 热 区 的 方法 。 旅游 加 点 地 图 
/设计 思路 

首先 选中 要 创建 图 像 映射 的 地 图 图 像 ， 在 属性 面板 上 选中 多 边 形 热点 工具 ， 在 要 添加 链接 的 区 域 给 
制 多 边 形 ， 然 后 指定 热 区 的 链接 地 址 和 文件 的 打开 方式 等 属性 。 同 样 的 方法 ， 创 建 其 他 热点 区 域 。 


户 信 操作 步 时 


(1 ) 启动 Dreamweaver CC 2018， 执行 “文件 ”|“ 新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 设 
置 文档 类 型 为 HTML,， 无 框架 ， 单 击 “ 创 建 ”按钮 新 建 一 个 空白 的 HTML 文件 。 

(2) 执行 “插入 ”| “表格 ”命令 ， 在 弹出 的 “表格 ”对 话 框 中 设置 表格 行 数 为 1， 列 为 1， 表格 宽 
度 为 600 像素 ,边框 粗细 为 0， 无 标题 ， 如 图 6-23 所 示 

(3 ) 选中 表格 , 打开 “属性 ”面板 , 在 “对 齐 ” 下 拉 列 表 中 选择 “居中 对 齐 ” 选 项 ， 如 图 6-24 所 示 ， 
使 表格 在 页 面 上 水 平 居中 显示 。 

(4 ) 将 鼠标 指针 放 在 表格 中 ,在 属性 面板 上 设置 单元 格 内 容 水 平 “ 居 中 对 齐 ”, 垂 直 " 居 中 ”, 如 图 6-25 
所 示 ， 


图 6-24 “属性 ”面板 


图 6-23 “Table”( 表格 ) 对 话 框 图 6-25 设置 单元 格 属性 


(5 ) 执行 “插入 ”| “图像 ”命令 ,在 弹出 的 对 话 框 中 选择 一 张 旅游 地 图 ， 如 图 6-26 所 示 。 


(6) 单 击 图 片 , 在 属性 面板 上 单 击 “ 多 边 形 热点 工具 ”图 |, 在 图 像 窗口 中 需要 制作 热点 的 区 域 单 击 鼠 
标 ， 绘 制 一 个 点 ， 然 后 拖 奥 鼠标 指针 在 该 区 域 另 一 个 地 方 绘制 第 二 个 点 ， 以 此 类 推 ， 绘 制 一 个 多 边 形 图 


像 映射 ， 如 图 6-27 所 示 。 


花 海 
滑雪 场 
| 梅花 府 场 
BD 池 
KALA dS A 
图 6-26 ”原始 图 像 
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r ya 


花 源 
滑雪 场 

》 ”梅花 刻 场 
BD“ 


eedr?p oe 


图 6-27 添加 多 雇 形 热点 


(7) 选中 绘制 的 热点 ,在 “属性 ”面板 上 的 “链接 ”选项 中 输入 链接 地 址 ,本 例 选择 一 张 图 片 ; 在 “ 目 


标 ” 选 项 中 选择 “_self”"， 在 “替换 ”和 “标题 ”文本 框 中 输入 “大 九 湖 梅 花 鹿 场 ”。 


此 时 在 浏览 器 中 预览 ， 可 以 看 到 地 图 四 周 显示 有 蓝 色 边框 ， 将 鼠标 指针 移 到 热点 上 时 ， 鼠 标 指针 变 
为 手 形 。 单 击 热点 区 域 , 则 在 当前 窗口 中 显示 链接 目标 , 如 图 6-28 所 示 。 单 击 浏览 器 工具 栏 中 的 “返回 ” 


按钮 即 可 返回 到 喘 射 图 。 


(8 ) 选择 工具 箱 中 的 “矩形 热点 工具 ” 国 ， 在 图 像 窗 口中 需要 制作 热点 的 区 域 按 下 鼠标 左 键 拖 动 ， 


绘制 一 个 矩形 热点 。 按 照 第 (7 ) 步 的 方法 ， 为 矩形 热点 和 圆 形 热点 添加 链接 地 址 和 替换 文字 ， 以 及 目标 


打开 方式 。 


(9 ) 选择 工具 箱 中 的 “ 圆 形 热 点 工具 ”图 , 按 照 第 (8 ) 步 的 方法 ,在 其 他 需要 映射 的 区 域 绘制 圆 形 热 


点 ， 并 为 贺 形 热点 添加 链接 地 址 和 替换 文字 ， 以 及 目标 打开 方式 ， 如 图 6-29 所 示 。 


| 号 


梅花 应 场 / 


-We 
去 


"orfp eo 


图 6-28 ”打开 链接 目标 


图 6-29 ”建立 图 像 映射 


站 教 你 一 招 : 若 对 创建 的 热点 不 满意 ， 可 以 使 用 “属性 ” 面 
板 中 的 “指针 热点 工具 ” 国 进 行 移动 、 修 改 或 删除 。 


使 用 “指针 热点 工具 ”在 热点 区 域 按 下 鼠标 左 键 拖 动 ， 可 将 热 


点 移 至 图 片 的 任意 位 置 。 


二 


使 用 “指针 热点 工具 ” 单 击 热 点 以 选中 热点 区 域 ， 然 后 将 饼 标 = 人 


指针 指向 节点 ， 此 时 鼠标 指针 变 为 黑色 箭头 ， 按 下 鼠标 左 键 拖 动 可 


改变 此 热点 区 域 的 大 小 ， 如 图 6-30 所 示 。 


Sd 


花 海 ] | 


使 用 “指针 热点 工具 ” 单 击 热 点 以 选中 热点 区 域 ， 按 下 键盘 上 一 -一 


的 Delete 键 可 删除 所 选 的 热点 。 


图 6-30 调整 热点 大 小 
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运 


击 图 像 中 的 热点 区 域 ， 


(10 ) 执行 “文件 ” |“ 保存” 命令 ， 保 存 页 面 。 在 浏览 器 中 预览 页 面 ， 若 剖 
则 可 以 在 新 窗口 中 打开 它 的 链接 页 面 。 


6.2.4 工 -mail 链接 


在 网 页 上 创建 电子 邮件 链接 ， 可 以 方便 用 户 反馈 意见 。E-mail 链接 是 指 当 用 户 在 浏览 器 中 单 击 电子 
邮件 链接 之 后 ， 不 是 打开 一 个 网 页 文件 ， 而 是 启动 用 户 系统 客户 端的 E-mail 软件 ( 如 Outlook Express )， 
并 打开 一 个 空白 的 新 邮件 ， 收 件 人 邮件 地 址 被 电子 邮件 链接 中 指定 的 地 址 自动 填充 

1. 使 用 插入 邮件 链接 命令 创建 电子 邮件 链接 

在 “设计 ”视图 中 ,将 指针 放置 在 希望 显示 电子 邮件 链接 的 地 方 ， 或 选中 希望 显示 为 电子 邮件 链接 
的 文本 ,然后 选择 “插入 ”|“HTML”|“ 电 子 邮 件 链接 ”命令 。 或 者 直接 在 “HTML” 插入 面板 中 单 击 “ 电 
子 邮 件 链接 ”按钮 ， 如 图 6-31 所 示 。 弹出 如 图 6-32 所 示 的 “电子 邮件 链接 ”对 话 框 。 


件 柑 接 


图 6-31 “电子 邮件 链接 ”按钮 图 6-32 “电子 邮件 链接 ” 对 话 框 


9 文本 : 用 于 输入 或 显示 将 作为 电子 邮件 链接 显示 在 文档 中 的 文本 

YN 电子 邮件 : 用 于 输入 收 件 人 的 E-mail 地 址 

设置 完成 后 ， 单 击 “ 确 定 ”按钮 ， 关 闭 对 话 框 

2. 使 用 属性 面板 创建 电子 邮件 链接 

在 文档 窗口 选择 文本 或 图 像 , 在 属性 面板 上 的 “链接 ”文本 框 中 直接 输入 mailto: 电子 邮件 地 址 即 可 。 
例如 mailto:webmaster@hotmail.com， 如 图 6-33 所 示 


图 6-33 在 “属性 ”面板 上 创建 电子 邮件 链接 


(以 知识 拓展 
设置 E-mail 链接 的 邮件 主题 
用 户 在 设置 Email 链接 时 还 可 以 加 入 邮件 的 主题 。 方 法 是 在 输入 的 电子 邮件 地 址 后 面 加 入 
“?subject= 要 输入 的 主题 ”语句 ， 例 如 mailto:webmaster@hotmail.com?subject= 网 站 建设 的 一 些小 
建议 。 则 电子 邮件 的 “主题 ” 栏 将 自动 填充 为 “网 站 建设 的 一 些小 建议 "。 


6.2.5S” 空 链接 和 脚本 链接 


1. 空 链接 
也 称 为 虚拟 链接 ， 是 指 没有 指定 的 链接 ， 不 打开 链接 目标 ， 常 用 于 返回 页 面 顶端 ， 或 什么 也 不 做 。 
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利用 空 链接 ， 可 以 激活 文档 中 的 链接 对 应 的 对 象 和 文本 ， 然 后 为 其 添加 一 个 行为 ， 以 实现 当 鼠 标 经 过 
本 或 图 像 时 进行 一 些 交 互动 作 

选择 将 作为 虚拟 链接 的 文本 ， 然 后 打开 属性 面板 ， 在 “链接 ”文本 框 中 输入 “#"， 如 图 6-34 所 示 ; 
或 输入 javascript:;， 如 图 6-35 所 示 ， 即 可 创建 一 个 空 链接 。 


图 6-35 ”创建 空 链 接 2 


嫩 注意: javascript 一 词 后 依次 有 一 个 冒号 和 一 个 分 号 。 


使 用 第 1 种 格式 的 空 链 接 在 单 击 jy 回 到 页 面 项 部 ; 采用 第 2 种 格式 创建 的 空 链接 在 单 击 由 
发 生 任何 反应 ， 就 好 像 根 本 没有 单 击 一 


2. 脚本 链接 

脚本 链接 可 以 执行 JavaScript 代码 或 调用 JavaScript 函数 ， 用 于 不 离开 当前 网 页 的 情况 下 给 予 访问 
者 有 关 项 目的 补充 信息 。 脚 本 链接 也 可 用 于 在 访问 者 点 击 特定 项 目 时 执行 计算 、 表 单 验 证 和 其 他 处 理 
任务 。 

选择 需要 作为 脚本 链接 的 文本 ， 然 后 打开 属性 面板 ， 在 “链接 ”文本 框 中 输入 JavaScript: 要 执行 的 
代码 或 调用 的 函数 ， 如 JavaScript:alert( 您 好 ， 欢 迎 光临 ! 7)， 如 图 6-36 所 示 ， 即 可 创建 一 个 脚本 链接 。 

打开 浏览 器 预览 ， 当 把 鼠标 指针 移动 到 脚本 链接 上 时 ， 鼠 标 指针 变 为 手 形 ， 单 击 脚本 链接 会 弹出 一 
个 如 图 6-37 所 示 的 对 话 框 。 


et 
> 


~ 


图 6-36 ”执行 JavaScript 代码 的 脚本 链接 图 6-37 ”提示 对 话 框 


如 果 在 “属性 ”面板 上 的 “链接 ”文本 框 中 输入 i 如 图 6-38 所 示 。 在 浏览 
器 中 单 击 该 脚本 链接 ， 弹 出 如 图 6-39 所 示 的 提示 对 话 框 ， 单 击 “ 是 ”按钮 即 可 关闭 窗口 。 
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提高 
Windows Internet Explorer 上 -一 | 
> en 
BD? 
无 3 
vm le 
图 6-38 调用 JavaScript 函数 的 脚本 链接 图 6-39 ”预览 脚本 链接 的 效果 


6.2.6 下 载 链接 


文件 下 载 链 接 的 原理 很 简单 ， 只 要 链接 的 文件 类 型 浏览 器 无 法 识别 ， 就 会 使 用 正 浏览 器 直接 进行 下 
载 ， 并 保存 到 本 地 计算 机 中 ， 

在 页 面 中 选中 要 添加 下 载 链接 的 文字 或 图 像 ， 然 后 单 击 “ 属 性 ”面板 上 的 “浏览 文件 ”按钮 圈 ， 在 
弹出 的 对 话 框 中 选择 需要 下 载 的 内 容 ， 如 图 6-40 所 示 

保存 文件 后 ， 在 浏览 器 中 单 击 下 载 链接 ， 将 弹出 如 图 6-41 所 示 的 “文件 下 载 - 安全 和 警告” 对话 框 。 


文件 下 载 lo bd 
文件 可 -安全 | 
您 起 运行 或 保存 此 文件 四 ? 
[um 本 173KB 
来 源 : Disoftware 
ES 


无 By7 : 


© Mn 


图 6-40 设置 下 载 链 接 图 6-41 弹出 “文件 下 载 - 交 全 和 警告” 对话 框 


单 击 “保存 ”按钮 ， 将 弹出 “另存 为 ”对 话 框 ， 选 择 保存 文件 的 位 置 ， 最 后 单 击 “保存 ”按钮 ， 则 
链接 的 下 载 文件 即 可 保存 到 指定 位 置 。 


6.2.7 上 机 练习 一 一 创建 锚 点 链接 


锚 点 用 于 定义 网 页 中 的 一 个 位 置 ， 通 过 引用 锚 点 所 在 网 页 的 超 链 接 ， 就 可 访 
问 此 锚 点 所 在 的 网 页 中 指定 的 位 置 ， 以 方便 阅读 。 例 如 , index.html 中 有 一 个 名 Pe 
称 为 “al” 的 锚 点 ,在 starthtml 文件 中 创建 一 个 地 址 是 index.html#al 的 超 链接 后 ， 克 


单 击 此 超 链接 ， 不 但 会 打开 页 面 ndex html， 而 且 将 自动 滚动 到 错 点 “al” 所 在 Mae 
的 位 置 。 错 点 链接 通常 与 目录 或 索引 列表 结合 使 用 。 
练习 目标 


本 练习 实例 制作 一 个 常见 问题 页 面 ， 由 于 页 面 内 容 过 长 ， 为 方便 浏览 者 快速 找到 需要 的 内 容 ， 需 要 
为 页 面 添加 锚 点 链接 。 通 过 本 练习 实例 的 讲解 ， 使 读者 了 解 锚 点 的 作用 ， 熟 悉 制作 锚 点 链接 的 方法 。 
设计 思路 

首先 在 指定 位 置 插入 锚 点 ， 然 后 选中 要 链接 到 锚 点 位 置 的 文本 ， 在 属性 面板 上 设置 锚 点 链接 ， 并 设 
置 链接 文件 的 打开 方式 。 
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操作 步骤 
(1 ) 启动 Dreamweaver CC 2018 ,执行 “文件 ”| “打开 ”命令 ,打开 要 添加 锚 点 的 网 页 文件 ,如 图 6-42 


元 


无 二 5 区 注入 卡号 和 富 | 


无 法 出 现 个 人 网 上 急行 大 众 片 登 录 男 面 ~ 
输入 账号 和 卡号 时 总 出 模 人 


在 如 菜单 中 寺 择 “工具 
在 下 上 by 活检 中 思潮" 重 轨 为 安全 泊 


ie 
访 的 好 必 器 让 于 其他 要因 不 雍 安 装 拒 两 外 行 到 第 宅 件 ， 渤 工 吉 并 安 半 把 痪 所 行 嫩 录 | 件 下 载 版。 


条 这 和 rR 是 由 于 83 沪 天 和 和 人 


全 这 六 ， 关 是 区 为 代理 时 设 轩 境 训 引 站。 如果 
混 撕 号 上 同 ， 请 不 妻 使 月 代 惠 服 苍 深 : 天 行 SSL 帮 全 代理 ， 请 调 韦 “ 流 加 - 宰 旺 程 率 " 测 除 
主人 而 1 如 果 您 晤 经 过 代理 访 i 请 联系 训 所 在 由 99 和 3 管理 员 设 置 长 理 台 务 器 。 I75.0 济 赂 器 
种 他 务 器 的 步 妇 ， zter se 这 项 一 深 按 一 二 :3 这 机 一 ) 司 用 代理 妥 和 器 一 注 设 。 


入 : 有 折 丰 号 为 :0 位 ， 按 存折 李 上 的 际 号 办 入， 宝 码 六 位 如 畔 一 卡 天 是 12 位 卡号 的 ， 呈 项 匆 入 地 区 码 后 面 
了 位 下 号 ， 不 村 要 铀 入 前 本 4 位 的 地 区 码 ， 这 友基 位 。 如果 一 卡 性 是 13 位 卡 奢 的 ， 请 振 16 位 卡号 全 部 钠 入 ， 刻 
eye 


第 : 有 折 此 甩 设 有 吾 表 访 可 在 个 个 上旬 人大 六 所 中 查 表 ， 四 此 到 主打 开 产 千村 折 没 二 避 * 


图 6-42 ”打开 的 文件 


(2 ) 将 鼠标 指针 放 在 要 设置 锚 点 的 位 置 ,例如 图 6-42 所 示 的 “ 问 : 无 法 安装 输入 卡号 和 密码 的 控 
件 ? ”之 前 ， 在 文档 工具 栏 上 单 击 “ 拆 分 ”按钮 ， 切 换 到 “ 拆 分 ”视图 ， 在 “代码 ”视图 中 也 可 以 看 到 
当前 鼠标 指针 所 在 位 置 ， 输 入 <a id="ql" name="ql">， 然 后 在 选中 的 文本 后 插入 </a>， 即 创建 一 个 命名 
为 ql 的 锚 点 ， 如 图 6-43 所 示 。 


管 : 在 Windows XPtService Pack 2、Windors 2003 等 操作 系统 中 ， 用户 可 以 自己 选择 是 写 


答 : 人 的 各 上 下 载 内行 Aetivel 近 件 ,对 于 这 种 本 内 ,你 必须 打开 江 攻 吕 的 Aetive 呐 
操作 方法 : 在 浏览 器 菜单 中 选择 “工具 ”| “Internet 选 项 ”， 在 弹 二 入 j 话 杖 中 选择 全 ~ 


479x159 


图 6-43 ”插入 锚 点 
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1 于 锚 点 对 象 是 不 可 见 对 象 ， 因此， 在 “设计 ”视图 中 指定 的 位 置 只 能 看 到 插入 的 锚 点 图 标 龟 ， 如 
图 6-43 所 示 。 


四/ 提示: 锚 点 名 称 只 能 包含 小 写 ASCI 字母 和 数字 ， 且 区 分 大 小 写 。 如 果 看 不 到 锚 点 标记 ， 
可 以 在 “设计 ”视图 中 执行 “查看 ”|“ 设 计 视图 选项 ”|“ 可 视 化 助理 ”|“ 不 可 见 元 素 ”命令 。 


(3 ) 在 页 面 中 选择 要 链接 到 锚 点 的 文字 。 例 如 页 面 顶端 的 “无 法 安装 输入 卡号 和 密码 的 控件 ? "。 然 
后 在 属性 设置 面板 的 “链接 ”文本 框 中 输入 锚 点 的 名 称 “#q1”"， 如 图 6-44 所 示 。 


图 6-44 创建 锚 点 链接 


嫩 注意 : 在 “链接 ”文本 框 中 输入 锚 点 名 称 时 ， 要 在 锚 点 名 称 前 面 添加 一 个 特殊 的 符号 “#"。 
例如 : 加 1， 其 中 ，ql 为 错 点 名 称 。 如 果 所 链接 的 锚 点 不 在 当前 文档 中 ， 则 在 “链接 ”文本 框 中 首 
先 要 添加 链接 页 面 的 URL， 然 后 输入 井 号 (#) 和 锚 点 名 称 。 如 果 要 在 当前 页 面 调 用 同一 文件 夹 中 
的 index.html 页 面 上 名 为 top 的 锚 点 ， 则 应 在 “链接 ”文本 框 中 输入 index.html#top。 


(4) 参照 上 面 的 步骤 添加 其 他 各 条 问题 的 锚 点 ， 分 别 为 Q2、q3、q4、q5、q6， 然 后 相应 的 文本 添加 
超 链接 ， 链 接 到 锚 点 ， 如 图 6-45 所 示 。 


图 6-45 插入 的 锚 点 
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(5 ) 执行 “文件 ” |“ 保存 ”命令 保存 文档 ， 然 后 在 浏览 器 中 预览 锚 点 链接 的 效果 。 单 击 页 面 中 设置 
锚 点 链接 的 元 素 ， 页 面 将 自动 跳 转 到 指定 的 锚 点 位 置 


6.3 管理 超 链接 


对 于 某 些 大 型 站 点 来 说 ， 处 理 所 有 超 链接 资源 的 完整 列表 可 能 会 变 成 很 棘手 的 问题 。 利 
Dreamweaver CC 2018 提供 的 “URLs" 面 板 , 可 以 将 所 有 链接 资源 归 类 在 一 起 ,为 资源 指定 别名 以 指明 用 途 ， 
以 便 日 后 查找 、 维 护 资源 


6.3.1 认识 “URLs” 面 板 


URL 的 全 称 是 Uniform Resource Locator( 统一 资源 定位 器 ), 从 最 简单 的 单一 页 面 到 复杂 的 综合 站 点 
所 有 的 资源 内 容 都 可 以 通过 “URLs” 面 板 进 行 访 问 。 下 面 介绍 新 建 URL 和 编辑 URL 的 方法 。 

(1 ) 选择 “窗口 ”|“ 资 源 ”命令 ， 打 开 “ 资 源 ” 面 板 

单 击 “ 资 源 ” 面 板 左 侧 的 “URLs” 按 馈 加 切换 到 “URLs” 面 板 ， 如 图 6-46 所 示 。 

RLs” 面 板 有 两 种 视图 :“ 站 点 ”视图 和 “收藏 ”视图 。“ 站 点 ”视图 如 图 6-46 所 示 ， 在 该 面板 下 

方 的 es 中 ， 列 出 当前 站 点 中 使 用 的 所 有 链接 资源 及 类 型 

“收藏 ”视图 用 于 收藏 常用 的 资源 。 收 藏 资源 并 不 作为 单独 的 文件 存储 在 磁盘 上 ， 它 们 是 对 “站 点 ” 
视图 列表 中 的 资源 的 引用 。“ 站 点 ”视图 和 “收藏 ”视图 的 大 多 数 操作 都 是 相同 的 ， 不 过 ， 有 几 种 任务 只 
能 在 “收藏 ”视图 中 执行 

(3 ) 单 击 “收藏 ” 单 选 按钮 ， 切 换 到 “收藏 ”视图 ， 如 图 6-47 所 示 


和 
天 Dp 人 及 Ft 从 
人 和 区 


加 
[| 
[| 
加 
| 
[| 
加 


图 6-46 “让 点 ”视图 图 6-47 “收藏 ”视图 
6.3.2 上 机 练习 一 一 添加 超 链 接 资源 


二 练习 旧 标 


本 练习 实例 在 “URLs” 面 板 中 添加 常用 的 超 链接 资源 。 通 过 本 练习 实例 的 ”6-4 上 机 练习 一 一 添加 
讲解 ， 使 读者 了 解 “URLs” 面 板 的 功用 ， 掌 握 添加 链接 资源 的 方法 。 超 链 接 资源 


设计 电路 
首先 在 “URLs” 面 板 的 “收藏 ”视图 中 添加 URL 及 昵称 ， 选 中 要 添加 链接 的 文本 ， 在 “URLs” 面 
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板 中 应 用 URL。 然 后 在 页 面 的 指定 位 置 插入 另 一 个 超 链接 资源 。 


记 信 操作 步 曙 
(1) 打开 *ORLS" 面板 。 执行“ 窗口" | “资源 " 命令 ,打开 “资源 " 面板 。 单 击 “ 资 源 ” 面板 左 便 的 
“URLs” 按 钮 图 ， 切 换 到 “URLs” 面 板 ， 然 后 单 击 “收藏 ”按钮 ， 切 换 到 “收藏 ”视图 ， 如 图 6-48 所 示 。 
(2 ) 新 建 URL。 单 击 “ 收 藏 ”视图 右 下 角 的 “新 建 DRL” 按 乌 国 ， 鲁 出 “添加 URL” 对 话 框 ， 如 
图 6-49 所 示 。 


图 6-48 “URLs” 面 板 的 “收藏 ”视图 图 6-49 添加 URL 


(3 ) 设置 URL 及 昵称 。 在 “URL” 文本 框 中 输入 http://www.sina.com.cn; 在 “昵称 ” 栏 输 入 “新 浪 ”， 
单 击 “ 确 定 ” 按 钮 关闭 对 话 框 

此 时 ,在 “收藏 ”视图 中 可 以 看 到 新 建 的 URL， 视 图 下 方 的 窗 格 中 显示 该 URL 的 昵称 为 “新 浪 ”， 
类 型 为 “HTTP”"， 值 为 http://www.sina.com.cn， 如 图 6-50 所 示 

(4) 添加 其 他 URL。 按 照 第 (2) 步 和 第 (3) 步 的 方法 添加 其 他 链接 ，URL 为 http://www.baidu. 
com， 了 昵称 为 “百度 搜索 ” 

(5 ) 选中 要 添加 链接 的 文本 。 在 Dreamweaver“ 设 计 ” 视 图 中 打开 一 个 网 页 ， 并 且 选 中 要 应 用 该 
URL 的 文本 “新 浪 新 闻 "， 如 图 6-51 所 示 

(6 ) 应 用 URL 资源 。 打开“URLs” 面 板 ， 在 资源 列表 中 选中 昵称 为 “新 浪 ”的 链接 ， 然 后 单 击 面 
板 左 下 角 的 “应 用 ”按钮 ， 如 图 6-52 所 示 


| 
图 
日记 
加 


图 6-50 添加 的 URL 图 6-51 选中 文本 
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此 时 ， 在 “设计 ”视图 中 可 以 看 到 选中 的 文本 已 添加 超 链接 ， 如 图 6-53 所 示 。 


图 6-52 应 用 URL 图 6-53 应 用 URL 的 效果 


(7) 插入 URL。 将 鼠标 指针 放 在 表格 的 第 2 行 , 在 “URLs” 面 板 的 “收藏 ”视图 中 选中 


ph 需要 的 


URL, 例如 “百度 搜索 "， 然 后 单 击 面 板 左 下 角 的 “插入 ”按钮 ， 如 图 6-54 所 示 。 即 可 在 插入 点 插入 指 


定 的 链接 文本 ,效果 如 图 6-55 所 示 


6-54 插入 URL 图 6-55 ”插入 URL 的 效果 


6.4 ”实例 精 讲 一 一 古诗 词 鉴 赏 页 面 


二 朱 习 目标 


通过 前 面 基础 知识 的 学 习 ， 结 合 实例 讲解 进一步 掌握 在 Dreamweaver CC 2018 中 创建 各 种 超级 链接 


的 方法 。 


设计 思路 


本 实例 制作 一 个 古诗 词 鉴赏 页 面 ， 首 先 运用 表格 布局 制作 出 整个 页 面 的 外 部 框架 ， 中 间 部 分 为 
左 、 右 两 个 部 分 ,运用 赃 套 的 表格 布局 页 面 ; 然后 在 单元 格 中 插入 图 像 和 文字 ， 并 通过 定义 CSS 
属性 设置 单元 格 的 背景 图 像 ; 最 后 通过 在 “属性 " 面板 设置 “链接 "属性 完成 页 面 ,最 终 效 果 如 图 6-56 


所 示 。 
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鲍 制作 重点 


泊 般 的 调 。 ” 现 书 有 感 池上 春日 村 居 
定时 
古诗 词 鉴赏 CE 让 
SC SP a 


感 诗 赏析 | 未 词 赏 析 | 友情 链接 


丰 调 方 猪 一 些 开 ， 天 光 云 影 共 待 和 
间 污 哪 得 浅 如 许 ， 为 有 源头 活水 未 
全 


NR 7 
3 . 洒 肌 有 3 站 


京口 盾 州 一 水 同 ， 圳 山 只 隔 数 重山 
春风 又 扣 江 南 库 ， 朋 月 何 时 赂 护 还 > 


i Pe 
i 


wf 
CS 


RE pp 
更 多 访问 7 a 


一 
A 
拓 oh 有 -ev 


最 终 效果 


图 6-56 


(1 ) 在 实例 制作 过 程 中 ， 要 注意 学 习 创 建 谋 套 表 格 ， 并 设置 表格 的 背景 图 像 属性 。 
(2 ) 注意 学 习 制 作 空 链接 和 锚 点 链接 的 方法 。 


记忆 操作 步骤 


6.4.1 设计 页 面 布 局 


本 节 将 使 用 表格 和 嵌 套 表格 设计 页 面 布局 。 


1. 新 建文 件 


6-5 设计 页 面 布局 


执行 “文件 ”| “新 建 ”命令 ,在 弹出 的 “新 建文 档 ” 对 话 框 中 选择 HTML 文件 ,框架 “无 ”, 单 击 “ 创 


”按钮 ， 创 建 一 个 空白 
2. 设置 页 面 属性 


执行 “文件 ”| “页 


AH 


的 HTML 文件 。 


属性 ”命令 ， 弹 出 “页 面 属性 ”对 话 框 。 


(1) 设置 外 观 : 在 “外 观 ”( CSS ) 分 类 中 ,设置 页 面 字 体 为 新 宋体 ， 大 小 为 13px, 左 、 右 、 上 、 下 
边 距 均 为 0px， 如 图 6-57 所 示 。 


站 提示 : 如 果 在 


“字体 ”列表 中 没有 找到 需要 的 字体 ， 可 以 单 击 字体 列表 底 端 的 “管理 字体 ” 


命令 ,在 弹出 的 “管理 字体 ”对 话 框 中 单 击 “ 自 定义 字体 堆栈 ”页 签 ， 然 后 在 “可 用 字体 ”列表 中 
找到 需要 的 字体 ， 单 击 “ 添 加 ”按钮 萎 村 ， 如 图 6-58 所 示 ， 将 选择 字体 添加 到 字体 列表 中 。 
单 击 “ 完 成 ”按钮 关闭 对 话 框 后 ， 即 可 在 字体 下 拉 列 表 中 找到 选择 的 字体 。 
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图 6-57 设置 页 面 外 观 


Adobe Edge Web Fonts 本 地 Web 字体 自 定 义 字 体 堆栈 


E 


模 条 

方正 黑体 简体 

Verdana, Arial s 
(在 以 下 列表 中 添加 字体 ) 


拓 返 的 字体 


图 6-58 选择 字体 


(2 ) 设置 链接 样式 : 在 “链接 ”( CSS ) 分 类 中 ， 设 置 链接 颜色 为 #6f4c23; 下 夯 线 样式 为 始终 无 下 面 
线 ， 如 图 6-59 所 示 。 

3. 插入 布局 表格 

执行 “插入 ”|“ 表 格 ” 命 令 ， 在 弹出 的 “Table”( 表格 ) 对 话 框 中 设置 行 数 为 5， 列 为 3， 表 格 宽度 
为 1003 像素 ,边框 粗细 、 单 元 格 边 距 和 单元 格 间 距 均 为 0， 如 图 6-60 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 
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Table es 


图 6-59 设置 链接 样式 图 6-60 设置 “Table”( 表格 ) 对 话 框 


4. 合并 单元 格 
选中 第 1 行 单元 格 ， 在 “属性 ”面板 上 单 击 “ 合 并 所 选单 元 格 ”按钮 ， 将 第 1 行 单元 格 合并 为 一 行 。 
同样 的 方法 ,合并 第 4 行 、 第 5 行 、 第 2 行 第 3 列 和 第 3 行 第 3 列 ， 效 果 如 图 6-61 所 示 。 


图 6-61 合并 单元 格 的 效果 

接 下 来 在 第 3 行 添 加 两 个 典 套 表格 ， 分 别 用 于 放置 主 图 和 正文 

5. 插入 左 侧 的 庶 套 表格 

将 鼠标 指针 放 在 第 3 行 第 1 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 ， 在 弹出 的 Table ( 表格 ) 对 
话 框 中 设置 行 数 为 2， 列 为 3， 表 格 宽度 为 468 像素 ,边框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 为 0 ， 如 
图 6-62 所 示 。 单 击 “ 确 定 ”按钮 ， 插 入 嵌 套 表格 

6. 合并 单元 格 

选中 嵌 套 表格 第 1 列 的 单元 格 , 在 “属性 ”面板 上 单 击 “ 合 并 所 选单 元 格 ” 按 钮 ,合并 第 1 列 单元 格 
同样 的 方法 ， 合 并 第 3 列 单元 格 ， 如 图 6-63 所 示 。 


Table a 


] 


图 6-62 设置 “Table”( 表格 ) 对 话 框 图 6-63 合并 单元 格 1 
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7. 插入 右 侧 的 谋 套 表格 

将 鼠标 指针 放 在 第 3 行 第 2 列 单元 格 中 ,执行 “插入 ”|“ 表 格 ” 命 令 ， 在 弹出 的 “表格 ”对 话 框 中 
设置 行 数 为 8, 列 为 5, 表格 宽度 为 511 像素 , 边框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 为 0, 如 图 6-64 所 示 。 
单 击 “ 确 定 ”按钮 ， 插 入 幅 套 表格 。 


8. 合并 单元 格 


选中 嵌 套 表格 第 1 列 的 单元 格 , 在 “属性 ”面板 上 单 击 “ 合 并 所 选单 元 格 ”按钮 ,合并 第 1 列 单元 格 。 
同样 的 方法 ， 合 并 第 7 行 、 第 8 行 、 第 2 行 至 第 6 行 的 第 1 列 和 第 3 列 ， 如 图 6-65 所 示 。 


Table 


6-64 设置 “Table”( 表格 ) 对 话 框 图 6-65 合并 单元 格 2 


9. 插入 图 像 
将 鼠标 指针 放 在 第 2 行 第 1 列 单元 格 中 ， 在 “属性 ”面板 上 设置 单元 格 内 容 垂 直 “ 顶 端 ”， 然 后 执行 
“插入 ”| “图像 ” 命 令 ， 在 单元 格 中 插入 图 像 。 同 样 的 方法 ， 在 其 他 单元 格 中 插入 图 像 ， 如 图 6-66 所 示 。 


区 必 
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10. 保存 文件 
执行 “文件 ” |“ 保存 ”命令 ,在 弹出 的 对 话 框 中 输入 文件 名 称 。 


6.4.2 ”制作 导航 和 页 脚 


本 节制 作 页 面 的 导航 和 页 脚 部 分 ， 涉 及 的 主要 知识 点 是 定义 CSS 规则 设置 单 os 
元 格 的 背景 图 像 ， 以 及 使 用 单元 格 的 “水 平 ” 和 “垂直 ”属性 定位 网 页 元 素 6-6 “制作 导航 和 页 有 


1. 新 建 CSS 规则 

将 鼠标 指针 放 在 第 1 行 单元 格 中 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “CSS 样式 "| “新 建 "命令 ， 
弹出 “新 建 CSS 规则 ”对 话 框 , 设置 选择 器 类 型 为 “类 ”, 输入 选择 器 名 称 .topbg, 规则 定义 的 位 置 为 “ 仅 
限 该 文档 "， 如 图 6-67 所 示 。 


cm 可 EE 
和 


为 CSS 规则 选择 上 下 文选 择 器 类 型。 
[天 (可 应 用 于 任何 0ML 元 素 ) 四 Cm] 


先 树 有 名 称 : 
选择 或 输入 选择 器 名 称 。 
3 


A 


不 太 具 体 更 具体 


图 6-67 设置 “新 建 CSS 规则 ”对 话 框 


2. 定义 CSS 属性 
单 击 “ 确 定 ” 按 钮 ,弹出 “.topbg 的 CSS 规则 定义 ”对 话 框 。 选 择 “ 背 景 " 分 类 ,设置 背景 图 像 ,不 重复 ， 
且 背 景 图 像 的 位 置 水 平 “left”( 左 ), 垂直 “top”( 顶端 ), 如 图 6-68 所 示 。 单 击 “ 确 定 ”按钮 关闭 对 话 框 。 


.topbg 的 CSS 规则 定义 [| 


图 6-68 设置 “topbe 前 CSS 规则 定 又 ”对 话 框 
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3. 应 用 规则 
将 鼠标 指针 放 在 第 1 行 单元 格 中 ， 在 “属性 ”面板 上 单 击 “CSS” 按 钮 ， 在 “目标 规则 ”下 拉 列 表 
中 选择 topbg; 在 “高 ”文本 框 中 输入 48， 如 图 6-69 所 示 。 此 时 的 页 面 效 果 如 图 6-70 所 示 。 


Ei eA Wy | | 
A em EN 


图 6-70 页面 效果 


4. 定义 logo 背景 
将 鼠标 指针 放 在 左 侧 谋 套 表格 的 第 1 行 第 2 列 单元 格 中 ， 按 照 第 3 步 的 方法 定义 规则 .logobg， 设 置 
单元 格 的 背景 图 像 ， 如 图 6-71 所 示 。 然 后 在 “属性 ”面板 上 设置 单元 格 高 度 为 57， 并 应 用 规则 。 


| 


Jogobg 的 CSS 规则 定义 


图 6-71 设置 “logobg 的 CSS 规 则 定义 ”对 话 框 
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5. 定义 导航 条 和 页 脚背 景 
按照 第 4 步 同 样 的 方法 ， 定 义 规则 .navbg 和 .footbg， 如 图 6-72 和 图 6-73 所 示 ， 分 别 定义 导航 条 和 页 
脚 的 背景 ， 然 后 在 “属性 ”面板 上 设置 单元 格 的 高 度 , 并 应 用 规则 。 应 用 规则 后 的 页 面 效 果 如 图 6-74 所 示 。 


le 


.navbg 的 CSS 规则 定义 


图 6-72 ”设置 “navbg 的 CSS 规 则 定义 ”对 话 框 


,footbg 的 CSS 规则 定义 | 


6-73 ”设置 “footbg 的 CSS 规则 定义 ”对 话 框 


a ey 
图 6-74 设置 导航 条 和 页 脚背 项 的 页 面 效果 
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6. 设置 菜单 

将 鼠标 指针 放 在 第 1 行 单 元 格 中 ， 在 “属性 ”面板 上 设置 单元 格 内 容 水 平 “ 右 对 齐 "， 垂 直 “ 底 部 "， 
然后 执行 “插入 ”|“ 表 格 ”命令 。 设 置 行 数 为 1， 列 为 6， 表格 宽度 为 230 像素 ， 边 框 粗细 、 单 元 格 边 
距 和 单元 格 间距 均 为 0 ， 如 图 6-75 所 示 。 单 击 “确定 ”按钮 插入 表格 ， 并 在 表格 中 输入 菜单 文本 。 
7. 设置 导航 条 
将 鼠标 指针 放 在 第 2 行 第 2 列 单元 格 中 ,在 “属性 ”面板 上 设置 单元 格 内容 水 平 “ 居 中 对 齐 "， 垂 
直 “ 居 中 ”， 然 后 执行 “插入 ”|“ 表 格 ” 命 令 。 设 置 行 数 为 1， 列 为 5， 表格 宽度 为 500 像素 ,边框 粗细 、 


单元 格 边 距 和 单元 格 间距 均 为 0 ， 单 击 “确定 ”按钮 插入 表格 。 然 后 在 表格 中 输入 导航 文本 ， 如 图 6-76 
所 示 。 


Table PE 


ee 医生 轩 析 | 深 测 入 大 :|[ 洛 情 籁 损 
: 泊 册 县 洲 三 每 江 刚 景 3 站 i 月 … 漆 展 


图 6-75 设置 Table ( 表格) 对 话 框 图 6-76 ”制作 导航 条 


8. 定义 文本 样式 

单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”|“ 新 建 ”命令 ， 在 弹出 的 “新 建 CSS 规则 ” 
对 话 框 中 设置 选择 器 类 型 为 “类 ”， 选 择 器 名 称 为 .titlefont。 单 击 “ 确 定 ”按钮 ， 在 弹出 的 规则 定义 对 话 
框 中 设置 字体 (Font-Family ) 为 “方正 黑体 简体 “, 大 小 (Font-size ) 为 16, 如 图 6-77 所 示 , 单 击 “确定 ” 
按钮 关闭 对 话 框 ， 


idefont 的 CSS 规则 定义 >] 


图 6-77 设置 字体 和 字号 1 
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9. 应 用 规则 
选中 导航 文本 “ 泊 船 瓜 洲 ”， 在 “属性 ”面板 的 “目标 规则 ”下 拉 列 表 中 选择 .titlefont。 同 样 的 方法 ， 
为 其 他 导航 文本 应 用 规则 ， 如 图 6-78 所 示 。 


颖 生 轩 新 | 宗家 泊 . 闪光 到 接 
泊 般 后 洲 辩 江 柳 捧 注 上 


A 及 2 兴 项 


10. 添加 版 权 声 明 

将 鼠标 指针 放 在 最 后 一 行 单元 格 中 ,在 “属性 ”面板 上 设置 单元 格 内 容 水 平 “ 右 对 齐 ” ,垂直 “居中 ”， 
然后 执行 “插入 ”|“ 表 格 ” 命 令 , 插入 一 个 1 行 1 列 ， 宽 度 为 55% 的 表格 。 在 表格 中 输入 版 权 声明 ， 如 
图 6-79 所 示 。 


11. 定义 版 权 声 明 的 字体 和 字号 

单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”|“ 新 建 ”命令 ， 在 弹出 的 “新 建 CSS 规则 ” 
对 话 框 中 设置 选择 器 类 型 为 “类 ”， 选 择 器 名 称 为 .footstyle。 单 击 “ 确 定 ”按钮 ， 在 弹出 的 规则 定义 对 话 
框 中 设置 字体 (Font-family ) 为 “Verdana,Arial Unicode MS”"， 大 小 ( Font-size ) 为 13 ， 如 图 6-80 所 示 ， 
单 击 “ 确 定 ” 按 钮 关闭 对 话 框 


footstyle 的 CSS 规则 定义 PE 


图 6-80 设置 字体 和 字号 2 
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12. 应 用 样式 并 保存 文件 
选中 文本 ， 在 “属性 ”面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 .footstyle 应 用 规则 ， 效 果 如 图 6-81 所 
示 。 然 后 执行 “文件 ”|“ 保 存 ”命令 保存 文件 。 


图 6-81 应 用 样式 的 版 权 声明 效果 


6.4.3 制作 正文 部 分 


本 节 将 介绍 诗词 正文 部 分 。 . 
1_ 插入 图 像 6-7 制作 正文 部 分 


将 鼠标 指针 放 在 右 侧 谋 套 表格 的 第 1 行 ,在 “属性 "面板 上 设置 单元 格 内 容 水 平 “ 左 对 齐 ” ,垂直 “顶端 ”， 
然后 执行 “插入 ”| “图像” 命令 ， 在 弹出 的 对 话 框 中 选择 需要 的 图 片 。 同 样 的 方法 ， 在 第 1 列 和 第 3 列 
插入 图 像 ， 如 图 6-82 所 示 。 


2. 定义 单元 格 背 景 图 像 

将 鼠标 指针 放 在 第 2 行 第 2 列 单元 格 中 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “CSS 样式 "| 新 
建 "命令 ,在 弹出 的 “新 建 CSS 规则 ”对 话 框 中 设置 选择 器 类 型 为 “类 ”, 选 择 器 名 称 为 .clbg。 单 击 “ 确 
定 ”按钮 , 在 弹出 的 规则 定义 对 话 框 中 设置 背景 图 像 , 不 重复 (no-repeat ), 如 图 6-83 所 示 , 单 击 “ 确 
定 ”按钮 关闭 对 话 框 。 
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.clbg 的 CSS 规则 定义 


图 6-83 设置 “.clbg 的 CSS 规 则 定义 ”对 话 杠 


同样 的 方法 ， 定 义 第 3 行 第 2 列 单元 格 的 背景 图 像 ， 如 图 6-84 所 示 


cnrbg 的 CSS 规则 定义 [| 


图 6-84 设置 “.cnrbg 的 CSS 规 则 定义 ”对 话 框 


3. 应 用 规则 

将 鼠标 指针 放 在 第 2 行 第 2 列 单元 格 中 ,在 “属性 ”面板 上 设置 单元 格 高 度 为 46, 然 后 在 “目标 规则 ” 
下 拉 列 表 中 选择 .clbg 应 用 规则 。 设置 第 3 行 第 2 列 单元 格 的 高 度 为 64, 应 用 目标 规则 .cnrbg。 同样 的 方法 ， 
设置 其 他 单元 格 的 背景 图 像 ， 如 图 6-85 所 示 


图 6-85 设置 单元 格 背 吉 图 像 
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4. 拆 分 单元 格 

选中 第 2 行 第 2 列 单元 格 ， 在 “属性 ”面板 上 单 击 “ 拆 分 单元 格 ”按钮 ， 把 单元 格 拆 分 为 “ 列 "， 列 
数 为 3， 如 图 6-86 所 示 。 单 击 “确定 ”按钮 ， 即 可 将 单元 格 拆 分 为 3 列 。 同 样 的 方法 ,将 第 4 行 第 2 列 、 
第 6 行 第 2 列 的 单元 格 拆 分 为 3 列 。 

5 插入 图 像 

选中 第 2 行 第 2 列 单元 格 ， 在 “属性 ”面板 上 设置 单元 格 内 容 水 平 “ 居 中 对 齐 "， 垂 直 “ 顶 端 "， 然 
后 执行 “插入 ”| “图 像 ”命令 在 拆 分 后 的 第 2 行 单元 格 中 插入 图 像 。 同 样 的 方法 ， 在 拆 分 后 的 第 4 行 、 
第 6 行 单元 格 中 插入 图 像 ， 如 图 6-87 所 示 。 


图 6-86 ” 拆 分 单元 格 图 6-87 插入 图 像 


6. 输入 文本 

按 住 Ctrl 键 单 击 第 3 行 和 第 5 行 选中 单元 格 ， 在 “属性 ”面板 上 设置 单元 格 内 容 水 平 “ 居 中 对 齐 ”， 
垂直 “居中 ”， 然 后 分 别 输入 文本 ， 如 图 6-88 所 示 。 

7. 插 入 谱 套 表格 

将 鼠标 指针 放 在 最 后 一 行 单元 格 中 ,在 “属性 ”面板 上 设置 单元 格 内 容 水 平 “ 左 对 齐 ”, 垂 直 “ 顶 端 "， 
然后 执行 “插入 ”|“ 表 格 ” 命 令 ， 设 置 表格 行 数 为 1， 列 为 3， 表格 宽度 为 511 像素 ,边框 粗细 、 单 元 格 
边 距 和 单元 格 间距 均 为 0， 如 图 6-89 所 示 。 单 击 “ 确 定 ”按钮 插入 嵌 套 表格 。 


Table ei) 


图 6-88 输入 文本 图 6-89 设置 “Table”( 表格 ) 对 话 框 


145 


146 Breemmweevsr GE2018 


县 入 曾 瑟 提 高 


8. 插入 图 像 
选中 第 1 行 的 
在 第 1 列 和 第 3 列 


定 ” 按 钮 关闭 对 话 


应 用 规则 后 芯 


所 有 单元 格 ,在 “属性 ”面板 上 设置 单元 格 内 容 垂直 “顶端 ” ,执行 “插入 ”| “图 像 ” 命令 ， 
插入 图 像 。 然 后 定义 规则 .otherbg, 设置 第 2 列 的 背景 图 像 , 如 图 6-90 所 示 。 单 击 “ 确 
框 。 


otherbg 的 CSS 规则 定义 


图 6-90 设置 “.otherbg 的 CSS 规则 定义 ”对 话 框 


页 面 效 果 如 图 6-91 所 示 ， 


ew 
半日 料 二 、 


; 泪 角 抵 洲 关 江 腹 暴 ”池上 
= 
SR 
-2 
计时 二 玫 站 :部品 居 站 村 册 : 
春风 辽 : 产 ， 轩 月 亲 归 多 攻 还 。 
i 
a 更 多 许 半 7 Ya 


SN ee 


图 6-91 页 面 效果 1 


9. 插入 嵌 套 表格 


选中 第 2 列 单元 格 ， 在 “属性 ”面板 上 设置 单元 格 内 容 垂 直 


“顶端 ”对 齐 ， 插 入 


-个 一 行 七 列 、 


宽度 为 357px 的 表格 ， 然 后 分 别 在 第 1 列 、 第 3 列 、 第 5 列 和 第 7 列 单元 格 中 搬入 图 像 ， 效果 如 图 6-92 
所 示 。 
10. 保存 文件 


执行 “文件 ” 


|“ 保存 ”命令 保存 文件 。 
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~ 
2 
Se 古诗 词 鉴 党 


He Sh Ce Je Sheng 
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沽 上 3 音量 科 居 


Tr 
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图 6-92 页面 效果 2 


6.4.4 ”添加 链接 
1. 添加 空 链接 
选中 页 面 项 端的 “唐诗 赏析 ”， 在 “属性 ”面板 上 的 “链接 ”文本 框 中 输入 #， 或 输 

入 javascript:;( 注意 有 冒号 和 分 号 )， 如 图 6-93 所 示 。 这 样 ， 当 在 浏览 器 中 单 击 链接 文本 ”6-8 添加 链接 

“唐诗 赏析 ”时 ， 将 返回 页 面 顶端 ， 或 什么 也 不 做 


图 6-93 ”添加 空 链接 


2. 添加 相对 路 径 链接 

选中 页 面 项 端的 “宋词 赏析 "， 在 “属性 ”面板 上 的 “链接 ”文本 框 右 侧 单 击 “ 浏 览 文件 ”按钮 ， 在 
弹出 的 “选择 文件 ”对 话 框 中 选择 一 个 已 制作 好 的 网 页 文件 songchihtml; 然后 在 “目标 ”下 拉 列 表 中 选择 
“_blank”， 如 图 6-94 所 示 。 

3. 添加 绝对 路 径 链接 

选中 页 面 顶端 的 “友情 链接 ”"， 在 “属性 ”面板 上 的 “链接 ”文本 框 中 直接 输入 http:/www.123. 
com; 然后 在 “目标 ”下 拉 列 表 中 选择 “_blank”"， 如 图 6-95 所 示 。 


图 6-94 ”添加 相对 路 径 链接 图 6-95 ”添加 绝对 路 径 链接 
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草 契 关 入 门 二 生 高 


此 时 的 页 面 效果 如 图 6-96 所 示 。 链 接 文本 将 以 指定 的 样式 显示 ， 且 不 显示 下 画 线 。 


图 6-96 添加 了 链接 的 效果 


4. 添加 命名 锚 点 

切换 到 “ 拆 分 ”视图 ,在 “设计 ”视图 中 将 指针 定位 到 诗 “ 观 书 有 感 ”的 内 容 前 ， 然 后 在 “代码 ” 
视图 中 输入 <a id="m1"></a>, 定义 一 个 锚 点 ， 如 图 6-97 所 示 。 同 样 的 方法 ， 在 “ 泊 船 瓜 洲 ” 的 内 容 前 添 
加 一 个 锚 点 ， 命 名 为 m2。 


插入 的 锚 点 一 ~ 节 站 亩 方 惩 一些 开 ， 天 
问 斥 嘟 得 青 如 许 ， 为 有 源 


="left" gn="t 
"images/main_19.jpg 


号 560 加 


图 6-97 添加 锚 点 


昌 儿 提示: 锚 点 是 不 可 见 元 素 ， 如 果 在 “设计 ”视图 中 看 不 到 添加 的 错 点 标记 ， 可 以 选中 “ 查 
看 ”|“ 设 计 视图 选项 ”|“ 可 视 化 助理 ”|“ 不 可 见 元 素 ”命令 ， 如 图 6-98 所 示 。 


{BO 
拆 分 (5) » 
查看 模式 (M) » 
切 撞 视 图 (V) Cd+Ak+ 
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代码 视 加 选项 (W) + 
设计 视图 5 | 
设计 视图 选项 (O) ?| [| am _) mi) Ctrl+Shift+I 
相关 文件 (R) | 梯 旺 现 (S) | css 布局 背 有 (8) 
相关 文件 远 项 (O) + |。 二 二 续 (U) "| Y css 布局 本 模型 (M) 
Gb » | VCSS 布局 外 杠 (O) 
网 格 设 置 (G).。 。。，| 。。 表格 突 度 (W)} 
DKND ,| Y| 雪人 边 枉 m 
FE 和 | Y 图 从 地 图 中 
Vv 不 N) N 
标 R(R) »T 


图 6-98 显示 不 可 见 元 素 
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5. 链接 到 锚 点 
在 导航 栏 中 选中 文本 “ 泊 船 瓜 洲 ”, 在 “属性 ”面板 上 的 “链接 ”文本 框 中 输入 #m2, 如 图 6-99 所 示 。 
日 同样 方法 设置 “ 观 书 有 感 ”的 页 内 链接 #1。 


图 6-99 设置 锚 点 链接 


6. 添加 电子 邮件 链接 
选中 页 脚 区 域 的 电子 邮件 地 址 ， 然 后 在 “属性 ”面板 上 的 “链接 ”文本 框 中 输入 mailto:vivi@ 
website.com?subject= 一 些小 建议 ， 如 图 6-100 所 示 。 


图 6-100 设置 电子 邮件 链接 及 邮件 主题 


7. 添加 图 片 链接 

选中 “更 多 诗词 ”区 域 的 第 一 张 图 片 ， 在 “属性 ”面板 上 的 “链接 ”文本 框 中 输入 链接 地 址 。 由 于 
本 例 没 有 制作 对 应 的 链接 页 面 ,暂时 输入 #。 同样 的 方法 ,为 其 他 图 片 添加 链接 。 此 时 的 页 面 效 果 如 图 6-101 
所 示 。 


i 

"oe 了 
-3K “古诗 问 监 类 
IN 


i SC Up She 


图 6-101 页面 效 果 


8. 保存 文件 
执行 “文件 ” |“ 保存 ”命令 ， 在 弹出 的 对 话 框 中 输入 文件 名 ， 保 存 文件 。 至 此 ， 一 个 综合 各 种 链接 
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的 网 页 制作 完成 ， 在 浏览 器 中 的 预览 效果 如 图 6-101 所 示 。 


6.5 答疑 解 惑 


1. 怎样 制作 规范 的 电子 邮件 链接 ? 

答 : 选中 要 添加 链接 的 文本 ， 在 “属性 ”面板 的 “链接 ”文本 框 中 输入 如 下 命令 : 

mailto: x x x@x xx.com? Subjecf= 网 友 来 信 &bc= 其 他 电子 邮件 地 址 &bcc= 其 他 电子 邮件 地 址 。 

其 中 mailto 为 邮件 链接 的 协议 ，Subject 为 邮件 的 标题 ，bc 是 同时 抄 送 的 邮件 地 址 ，bec 表示 上 暗 送 。 

2. 点 击 空 链 接 时 ， 页 面 往往 会 返回 到 页 面 项 端 ， 怎 样 处 理 使 页 面 保持 不 动 ? 

答 : 在 “链接 ”文本 框 中 使 用 代码 javascript:void(null) 代替 #。 

3. 如 何 检查 站 点 中 的 链接 是 否 断 开 ? 

答 : 打开 站 点 中 的 一 个 文件 , 执行 “站 点 ”|“ 站 点 选项 ”|“ 检 查 站 点 范围 的 链接 ”命令 , 将 弹出 “ 链 
接 检查 器 ”面板 ( 图 6-102 ) ， 默 认 显 示 站 点 中 断 掉 的 链接 。 用 户 还 可 以 在 “显示 ”下 拉 列 表 中 选择 检查 
外 部 链接 和 孤立 的 文件 ， 


一 
EE 
EE 
函 心 
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图 6-102 “链接 检查 器 ”面板 


单 击 “ 链 接 检查 器 ”面板 左上 角 的 “检查 链接 ”按钮 国 ， 还 可 以 选择 检查 当前 文档 中 的 链接 、 检 查 
整个 当前 本 地 站 点 的 链接 或 检查 站 点 中 所 选 文 件 的 链接 。 


6.6 学 习 效果 自 测 


一 、 选 择 题 

1. 下 列 属于 超级 链接 绝对 路 径 的 是 ( )。 
A. http://www.adobe.com.cn/dreamweaver/help.html 
B. dreamweaver/help.html 
C.../ dreamweaver/help.html 


D. /help.html 
2. 若 要 在 新 浏览 器 窗口 中 打开 一 个 页 面 ， 应 在 “属性 ”面板 的 “目标 ”下 拉 菜 单 中 选择 〈 
A._blank 了 B._parent CC. sf D. _top 
3. 创建 空 链接 使 用 的 符号 是 ( 六 
A@ B.# C.& D.* 
4. 在 Dreamweaver CC 2018 中 ， 不 在 图 像 地 图 热 区 形状 之 列 的 是 ( ) 
A. 矩形 B. 圆 形 C. 三 角形 D. 多 边 形 
二 、 判 断 题 
1. http://www.mysite.com/index.htm#a 属于 锚 点 超级 链接 。( ) 


I ... 


2. 选中 要 设置 成 超级 链接 的 文字 或 图 像 , 然 后 在 “属性 ”面板 的 “链接 ” 栏 中 输入 相应 的 URL 地 址 ， 
即 可 对 文字 或 图 像 设置 链接 。( ) 

3. 如 果 要 实现 在 一 张 图 像 上 创建 多 个 超级 链接 ， 可 使 用 锚 点 超级 链接 。( ) 

4. 网 页 中 的 超 链接 样式 是 默认 的 ， 不 可 以 改变 。( ) 


三 、 填 空 题 

1 如 果 需 要 为 页 面 中 的 文字 创建 E-mail 链接 ， 需 要 选中 文字 ， 并 在 “属性 ”面板 上 的 “链接 ”文本 
框 中 输入 ( 

2. 空 链接 是 一 个 未 指派 目标 的 链接 ， 在 “属性 ”面板 的 “链接 ”文本 框 中 输入 ( 。。 ) 即 可 。 

3. 在 超级 链接 中 ， 路 径 通常 有 三 种 表示 方法 : (。。 ) 文 档 相 对 路 径 和 站 点 根 目录 相对 路 径 。 

4 使 用 ( 。。 ) 超级 链接 不 仅 可 以 跳 转 到 当前 网 页 中 的 指定 位 置 ， 还 可 以 跳 转 到 其 他 网 页 中 指定 的 
位 置 。 

5. 在 制作 文本 超 链接 时 ， 建 立 了 超 链接 的 文本 ( 。 。 ) 会 发 生变 化 ,并且 多 了 -一 条 下 夯 线 。 

四 、 操 作 是 


1. 在 页 面 中 输入 一 段 文字 ， 给 文字 加 超 链接 ， 单 击 链接 到 新 浪 网 站 。 
2. 将 6.2.3 节 地 图 中 的 其 他 地 区 都 加 上 热点 区 域 ， 并 加 上 相应 的 链接 。 
3. 仿照 本 章 的 实例 讲解 制作 一 个 链接 页 面 。 


| 声音、 视频 等 多 媒体 ， 制 作 多 媒体 网 页 已 成 为 潮流 。 在 网 页 中 应 用 多 
媒体 元 素 ， 可 以 极 大 地 丰富 网 页 元 素 的 样式 和 类 型 。 本 章 讲解 在 网 页 | 
中 使 用 多 媒体 元 素 的 相关 知识 


人 99@ 


@ 在 页 面 中 插入 多 媒体 元 素 
多 使 用 插件 插入 多 媒体 元 素 
多 使 用 多 媒体 元 素 制作 页 面 
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7.1 插入 动画 和 视频 


在 多 媒体 网 页 中 ,动画 和 视频 是 不 可 或 缺 的 元 素 。 本 节 将 介绍 网 页 设计 中 常用 的 动画 和 视频 插件 的 
应 用 ， 以 及 在 网 页 中 使 用 HTMLS 视频 、Canvas 和 动画 合成 等 多 种 媒体 类 型 的 实现 方法 。 


7.1.1 插入 Flash SWF 


Flash 由 Adobe 公司 推出 ， 利 用 它 可 以 制作 出 文件 体积 小 、 效 果 华丽 的 矢量 动画 。 

(1) 将 鼠标 指针 定位 在 需要 插入 Flash SWF 的 位 置 ， 执行 “插入 ”|“HTML”|“Flash SWF” 命 令 ， 
或 在 “HTML” 插 入 面板 上 单 击 “Flash SWF” 按 钮 (图 7-1 ) ， 弹 出 一 个 对 话 框 ， 提 示 用 户 先 保存 文件 ， 
如 图 7-2 所 示 。 


图 7-1 单 击 “Flash SWF” 按 钮 图 7-2 提示 对 话 框 


(2 ) 单 击 “ 确 定 ” 按 钮 ， 在 弹出 的 对 话 框 中 输入 文件 名 保存 文件 之 后 ， 弹 出 如 图 7-3 所 示 的 “选择 
SWF” 对 话 框 ， 选 择 需要 的 SWF 对 象 ， 单 击 “确定 ”按钮 关闭 对 话 框 ， 弹 出 如 图 7-4 所 示 的 “对 象 标签 
辅助 功能 属性 ”对 话 框 。 


国运 泽 SWwF 


(OSE 


组 织 -BO 
祷 Wi 记名 称 > 修改 日 其 类 型 
及 下 载 国 content03 2005/11/2 8:28 SWF 文 件 
加 点 而 国 content07 2005/112 8:29 SWF 文件 
季 最 5 访问 的 位 置 | 
周 库 
关 PPTV 视 二 
国 视 甩 
国 国 片 
国 
动 童 乐 
| 浊 计 算 机 
| 入 System (C:) 
局 本 地 磺 盘 (D) ~ 豆 ’ 
FE 本 
文件 各 (N): ~ |SWE 文 舍 (Gewh) . 
EE ee 


图 7-3 “选择 SWF” 对 话 框 
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图 7-4 “对 象 标签 辅助 功能 属性 ”对 话 杠 


在 该 对 话 框 中 ， 可 以 指定 插入 对 象 的 标题 、 访 问 键 和 Tab 键 索 引 ， 可 以 不 进行 设置 。 如 果 不 希望 每 
次 插入 媒体 对 象 时 都 弹出 这 个 对 话 框 ,可 以 在 “编辑 ”|“ 首 选项 ”|“ 辅 助 功能 ”对 话 框 中 取消 选中 “媒体 ” 
复 选 框 ， 如 图 7-5 所 示 


首 返 项 | 


口 打开 时 使 焦点 在 面板 中 (K) 


外 里 现 《 使 用 屏幕 读 到 器 时 东 用 ) (0) 


图 7-5 “首选 项 ”对 话 框 


(3 ) 单 击 “ 确 定 ”按钮 ， 即 可 在 页 面 中 显示 SWF 对 象 的 占 位 符 ， 如 图 7-6 所 示 。 此 时 保存 文件 ， 将 
弹出 如 图 7-7 所 示 的 “复制 相关 文件 ”对 话 框 ， 单 击 “ 确 定 ” 按 钮 ， 可 将 页 面 需要 的 支持 文件 复制 到 当 
前 站 点 根 目录 下 的 Scripts 文件 夹 中 


B wpress w 
£ Sorpts/swfobject_modified js 


图 7-6 SWF 对象 的 占 位 符 图 7-7 “复制 相关 文件 ”对 话 框 
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选中 页 面 上 的 SWF 对 象 占 位 符 ， 对 应 的 “属性 ”面板 如 图 7-8 所 示 。 


图 7-8 SWF 对 象 的 “属性 ”面板 


YN 宽 、 高 : 用 于 指定 SWF 影片 的 尺寸 。 


昌 儿 提示 : 开 如 果 在 文档 窗口 中 改变 了 Flash 文件 的 宽 或 高 ， 要 想 恢复 到 以 前 的 尺寸 ， 可 以 单 
击 “ 重 设 大 小 ”按钮 回 ， 如 图 7-9 所 示 。 


请 To 
回 自动 括 放 (u) 冰 


图 7-9 恢复 影片 尺寸 


站 FlashID: 定义 可 被 脚本 引用 的 名 称 

9 文件 : 指定 Flash 影片 文件 的 路 径 

Y 源 文件 : 指定 SWF 源 文件 (*la ) 的 路 径 

循环: 选中 该 项 ， 影 片 将 连续 播放 ; 否则 播放 一 次 后 停止 

所 自动 播放 : 选中 该 项 ，SWF 影片 在 页 面 加 载 时 就 播放 。 

所 垂直 边 距 : 用 于 设置 Flash 动画 上 边 与 其 顶部 的 页 面 元 素 ， 以 及 Flash 动画 下 边 与 其 底部 的 页 面 元 
素 之 间 的 距离 。 

YN 水 平 边 距 : 用 于 设置 Flash 动画 左边 与 其 左 侧 的 页 面 元 素 ， 以 及 Flash 动画 右边 与 其 右 侧 的 页 面 元 
素 之 间 的 距离 。 


和 9 品质 : 用 于 设置 Flash 影片 的 画 质 。 默 认 选 择 “高 品质 ”， 即 以 最 佳 状 态 显示 。 
和 比例 : 用 于 设置 Flash 动画 的 显示 比例 。 
人 默认 (全 部 显示 ): 显示 Flash 动画 的 全 部 ， 并 保证 各 部 分 的 比例 。 
他 无 边框 : 在 有 必要 时 ， 不 显示 Flash 动画 左 、 右 两 边 的 部 分 内 容 。 
他 严格 匹配 : Flash 动画 全 部 显示 , 但 比例 可 能 会 有 所 变化 。 
和 对 齐 : 用 于 设置 Flash 动画 与 周围 网 页 元 素 的 对 齐 方式 。 
所 Wmode: 用 于 设置 是 否 在 Flash 动画 的 透明 部 分 显示 页 面 背景 。 
人 不 透明 : 隐藏 页 面 上 位 于 SWF 对 象 后 面 的 所 有 内 容 。 
人 透明 : HTML 页 的 背景 可 以 透 过 SWF 对 象 的 所 有 透明 部 分 显示 出 来 ， 可 能 会 降低 动画 性 能 。 
9 背景 颜色 : 用 于 设置 Flash 动画 没有 放映 时 ， 其 所 在 位 置 显示 的 背景 色 。 
保存 文件 ， 在 浏览 器 (IE9 ) 中 预览 网 页 的 效果 如 图 7-10 (a ) 所 示 。 单 击 “ 人 允许 阻止 的 内 容 ” 按 钮 ， 
即 可 播放 SWF 动画 ， 如 图 7-10 (b ) 所 示 。 


站 提示: 如 果 网 页 上 的 SWE 文件 不 能 播放 ， 安 装 Flash Player 插件 即 可 。 
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守 区 民 入 门 吐 语言 


[= 5 we (= ls me 


司 cWnetpubwwwro D - OX | B axe 国 cwnepubwwmwro P - 0 x 上 [全 无 三 们 


此 页 面 上 的 内 容 需要 较 新 版 本 的 Adobe Flash Player。 


Servies 


入 到 吧 Adbbe F 


Internet Explorer 已 限制 此 网 页 运行 吉本 或 ActiveX 控 


区 许 阻止 的 内 容 (A) 


(a) (b) 
图 7-10 在 浏览 器 中 浏览 页 面 


7.1.2 ”插入 Flash 视频 


视频 是 基于 流 媒体 技术 的 文 、 图 、 声 、 像 四 者 的 结合 ， 在 网 页 中 合理 地 使 用 视频 会 给 网 页 带 来 意 想 
不 到 的 视觉 效果 。Flash 视频 ( *.flv ) 是 随 着 Flash 系列 产品 推出 的 一 种 流 媒体 格式 ， 可 以 在 页 面 上 显示 
播放 器 的 外 观 ， 方 便 用 户 对 视频 播放 进行 控制 

首先 保存 文件 ,然后 选择 “插入 " |“HTML” | “Flash Video” 命令 ,或 在 “HTML" 插入 面板 中 单 击 “Flash 
Video” 按 钮 (图 7-11 ) ， 弹 出 如 图 7-12 所 示 的 “插入 FLV” 对 话 框 


插入 FIV [| 


外 现 。 Clear Skin 1 (最 小 > 


本 制 高 克 比 


图 7-11 单 击 “Flash Video” 按 钮 图 7-12 “插入 FLV” 对 话 框 
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和 视频 类 型 : 选择 视频 播放 方式 。 
全 “累进 式 下 载 视频 ": 将 Flash 视频 文件 下 载 到 站 点 访问 者 的 硬盘 上 ， 然 后 播放 。 人 允许 在 下 载 完 
成 之 前 就 开始 播放 视频 文件 。 


字 “ 流 视频 ”": 对 Flash 视频 内 容 进 行 流 式 处 理 ， 并 在 一 段 很 短 时 间 的 缓冲 ( 可 确保 流畅 播放 ) 之 
后 在 Web 页 上 播放 该 内 容 。 


站 六 提示 : 若 要 在 网 页 上 启用 流 视频 ， 必 须 具 有 访问 Adobe Flash Communication Server 的 权限 。 


URL: 用 于 指定 Flash 视频 的 相对 路 径 或 绝对 路 径 。 

和 外 观 : 用 于 指定 Flash 视频 播放 组 件 的 外 观 。 所 选 外 观 的 预览 
会 出 现在 “外 观 ” 弹 出 菜单 下 方 。 

和 宽度 、 高 度 : 以 像素 为 单位 指定 FLV 文件 的 宽度 和 高 度 。 

和 包括 外 观 :; 设置 宽度 、 高 度 和 外 观 后 ， 右 侧 将 自动 显示 
FLYV 文件 的 宽度 和 高 度 与 所 选 外 观 的 宽度 和 高 度 相 加 得 出 
的 总 和 。 

和 限制 高 宽 比 : 保持 Flash 视频 的 宽度 和 高 度 之 间 的 比例 不 变 。 
默认 情况 下 选择 此 选项 。 

和 自动 播放 : 页 面 打开 时 自动 播放 视频 。 

和 自动 重新 播放 : 视频 播放 完 之 后 返回 到 起 始 位 置 开 始 重 新 播 。 图 7-13 插入 的 FLV 视频 占 位 符 
放 。 

单 击 “确定 ”按钮 关闭 对 话 框 ， 页 面 上 将 显示 FLV 视频 的 占 位 符 ， 如 图 7-13 所 示 。 


&) 提示 : 在 页 面 中 插入 FLV 视频 后 ,将 生成 一 个 视频 播放 器 SWF 文件 和 一 个 外 观 SWF 文件 ， 
如 图 7-14 所 示 。 它 们 共同 用 于 在 页 面 上 显示 Flash 视频 内 容 。 这 些 文件 与 Flash 视频 内 容 存 储 在 同 


一 目录 中 。 上 传 包含 Flash 视频 内 容 的 HTML 页 面 时 ，Dreamweaver CC 2018 将 以 相关 文件 的 形式 
上 传 这 些 文件 。 


修改 日 期 : 2012/8/15 10:41 
| Hlash Video Fle 。 大 小 123 MB 


图 7-14 ”播放 器 和 外 观 


在 “文档 ”窗口 中 单 击 Flash 视频 占 位 符 ， 对 应 的 “属性 ”面板 如 图 7-15 所 示 。 
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图 7-15 ”Flash 视频 的 “属性 ”面板 


该 面板 中 的 属性 与 “插入 FLV” 对 话 框 中 的 选项 类 似 ， 在 此 不 再 袭 述 


结 注意 : 如 果 要 更 改 视频 类 型 ( 例如 ， 从 “累进 式 下 载 ” 更 改 为 “ 流 式 ” )， 必 须 先 删除 页 面 上 
的 Flash 视频 占 位 符 ， 然 后 执行 “插入 ”|“HTML”| “Flash Video” 命 令 重 新 插入 Flash 视频 。 


如 果 要 从 页 面 中 删除 Flash 视频 ， 选 中 Flash 视频 占 位 符 ， 按 Delete 键 
7.1.3 ”上 机 练习 一 一 制作 游戏 网 站 引导 页 面 


二 练习 日 标 


通过 前 两 节 基 础 知识 的 学 习 ， 结 合 本 节 练 习 实 例 进一步 掌握 在 网 页 中 插入 ”7-1 上 机 练习 一 一 制作 


Flash 动画 ， 以 及 设置 动画 属性 的 操作 方法 游戏 网 站 引导 页 面 
设计 思路 
本 节 练习 制作 一 个 游戏 网 站 的 引导 页 ， 结 构 比较 简单 ， 运 用 表格 设计 页 面 布局 ， 然 后 在 页 面 的 相应 


的 位 置 插入 Flash 动画 、 图 片 和 文字 


户 胡 操作 步骤 


(1) 新 建文 件 。 启 动 Dreamweaver， 执行 “文件 ”|“ 新 建 ” 命 令 ,在 弹出 的 “新 建文 档 ” 对 话 框 中 
设置 页 面 类 型 为 HTML， 无 框架 ,创建 一 个 空白 的 HTML 文件 

(2 ) 设置 页 面 属性 。 执 行 “文件 ”|“ 保 存 ” 命 令 ， 在 弹出 的 对 话 框 中 输入 文件 名 称 default.html。 执 
行 “文件 ”|“ 页 面 属性 ”命令 ， 在 弹出 的 “页 面 属性 ”对 话 框 中 设置 背景 颜色 为 #000000， 文 本 颜色 为 
#CCCCCC， 如 图 7-16 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 


FE bid 


图 7-16 设置 页 面 属性 


(3 ) 插入 布局 表格 。 执 行 “插入 ”|“ 表 格 ” 命 令 , 在 弹出 的 “表格 ”对 话 框 中 设置 行 数 为 5, 列 为 1， 
表格 宽度 为 600 像素 ， 其 他 均 为 0。 单 击 “确定 ”按钮 关闭 对 话 框 ， 然 后 选中 页 面 上 的 表格 ， 在 “属性 ” 
面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “居中 对 齐 ”， 如 图 7-17 所 示 。 

(4 ) 输入 文字 并 格式 化 。 选 中 所 有 单元 格 ， 在 “属性 ”面板 上 设置 单元 格 内 容 水 平 “ 居 中 对 齐 ”， 然 
后 在 第 1 行 单元 格 中 输入 “http://www.gamelover.com.cn”。 
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图 7-17 设置 表格 对 齐 方式 


选中 文本 ， 单 击 鼠 标 右 键 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”|“ 新 建 ”命令 ， 如 图 7-18 所 示 。 
f 建 CSS 规则 ”对 话 框 ， 输 入 选择 器 名 称 .fontstyle， 定义 规则 的 位 置 为 “ 仅 限 该 文档 ”"， 如 图 7-19 


Unetpubywwwrootytestvche7vdefauttntm 区 


EE [一 > 一 
选择 加 大型: [| 
为 css 规 刚 选择 上 下 文选 择 器 类 型 。 取消 
EYE = Lm 
选择 器 名 称 : 
选择 或 输入 选择 器 名 称 。 


sis CE ou 
a 


局 浅 局 式 (P) 上 

列表 0 

FN) » 趟 二 真人 [a 

样式 (5) 以 

ES "| Cv. ] eet 
i 过 笃定 义 坝 RM 位 置 


模板 人) » 
, [十 


元 票 视 攻 (VW) 


图 7-18 新 建 CSS 样 式 图 7-19 “新 建 CSS 规则 ”对 话 框 


单 击 “ 确 定 ” 按 钮 ,弹出 “.fontstyle 的 CSS 规则 定义 ”对 话 框 ,在 “类 型 ” 分 类 中 设置 字号 ( Font-size ) 
为 14, 文本 颜色 ( Color ) 为 狂 FFF00 ( 黄色 )， 如 图 7-20 所 示 。 单 击 “ 确 定 ” Ce 框 

(5 ) 插入 Flash 动画 。 保存 文 件 , 将 鼠标 指针 放 在 第 2 行 单元 格 中 , 执行 “插入 ”| “HTML” | “Flash 
SWF” 命 令 ， 在 弹出 的 对 话 框 中 选择 welcome.swf， 如 图 7-21 所 示 


图 7-20 设置 CSS 属性 图 7-21 插入 Flash 动画 


(6 ) 插入 图 片 。 将 鼠标 指针 放 在 第 3 行 单元 格 中 ,设置 单元 格 高 度 为 160, 然 后 执行 “插入 ”|“ 图 像 ” 


160 
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命令 ， ee 笑 框 中 选择 网 站 的 Logo 标志 logo.jpg 

) 设置 超 链接 。 在 第 4 行 单元 格 中 输入 “欢迎 光临 游民 部 落 ,点 击 进 入 ”。 选 中 文本 “点 击 进入 
在 “ i. 面板 的 “链接 ”文本 框 中 输入 文本 的 链接 目标 index.html ( 该 文件 是 游戏 网 站 的 首页 ， 
人 ),“ 目 标 ” 为 _self 

定义 超 链接 的 显示 外 观 。 打 开 “CSS 设计 器 ”面板 , 设置 CSS 源 为 <style>, 单 击 “添加 选择 器 ” 
hs 5 行 输入 选择 器 名 称 a:link， 多 后 在 怕 性 刘表 下流 症 广 本 关公 : (color ) 为 症 F0000 (红色 )， 
字号 为 14px， 无 修饰 ， 如 图 7-22 所 示 

方法 ， 定 义 CSS 规则 a:hover 的 属性 ， 文 本 颜色 ( color ) 为 丁 FFF00 ( 黄色 )。 此 时 的 页 面 效 

果 如 图 7-23 所 示 


Cinetpub\www ho7\gamelovervdefault htmi 


CSS 设计 圳 


+ -| 源 : <style> 
+ “”@ 捍 体 : : 全 局 
+ ~ 选 和 吕 


i 
国名 


color : 国 :rroo 
font-size : 14px 


text- 和 
decoratn :TTF 


图 7-22 alink 的 CSS 属性 图 7-23 ”页面 效 果 1 


) 插入 页 脚 。 在 第 5 行 单元 格 中 插入 一 个 3 行 1 列 的 表格 ， 表 格 宽度 为 98%， 边 框 粗细 、 单 元 格 
边 距 和 单元 格 间距 均 为 0， 单 元 格 高 度 为 24， 然 后 输入 文本 作为 网 站 信息 栏 
选中 第 1 行文 本 ,在 “属性 ”面板 上 的 “ 下 拉 列 表 中 选择 .fontstyle; 选中 第 3 行 的 电子 邮箱 ， 
在 “属性 ”面板 上 的 “链接 ”文本 框 中 输入 mailto:admin@gamelover.com.cn。 此 时 的 页 面 效 果 如 图 7-24 
所 示 


) 保存 并 预览 文件 。 执 行 “文件 ”|“ 保 存 ” 命 令 保 存 文件 , 然后 在 浏览 器 (IE9 ) 中 打开 文件 , 如 
图 7-25 所 示 
单 击 “ 人 允许 阻止 的 内 容 ” 按 钮 ， 显 示 效果 如 图 7-26 所 示 


ww.gamelover.com.cn 
此 页 面 上 的 | 这 新 版 本 的 Adobe Flash Player。 


3 -pubwwwroottestchorgameloverdefaulthtml ~ Ox 
多 T 
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图 7-24 页 脚 效果 2 图 7-25 在 浏览 器 中 的 显示 效果 1 
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图 7-26 在 浏览 器 中 的 显示 效果 2 


7.1.4 ”插入 HTMLS 视频 


HTMLS5 通过 HTML 标签 <video> 支持 嵌入 式 的 媒体 ， 提 供 一 种 将 电影 或 视频 内 入 网 页 中 的 标准 
方式 

在 “设计 ”视图 中 ,将 指针 置 于 要 插入 视频 的 位 置 ,执行 “插入 ”|“HTML”|“HTMLS5 Video” 命 令 ， 
或 在 “HTML” 插 入 面板 上 单 击 “HTML5 Video” 按 钮 (图 7-27) ， 即 可 在 指定 位 置 插入 一 个 HIML5 
视频 占 位 符 ， 如 图 7-28 所 示 


男 


图 7-27 单 击 “HTML5 Video” 按 钮 图 7-28 HTML5 视频 占 位 符 


选中 页 面 上 的 HTMLS5 视频 占 位 符 ， 对 应 的 属性 检查 器 如 图 7-29 所 示 


图 7-29 HTML5 视频 属性 检查 器 
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下 面 简要 介绍 HTML5 视频 的 属性 功能 。 

9 源 /Alt 源 1/Alt 源 2:“ 源 ”用 于 指定 视频 文件 的 位 置 。 不 同 浏览 器 对 视频 格式 的 支持 有 所 不 同 。 
如 果 浏 览 器 不 支持 “ 源 ” 中 指定 的 视频 格式 , 则 会 使 用 “Alt 源 1” 或 “Alt 源 2” 中 指定 的 视频 格式 ， 
选择 第 一 个 可 被 识别 的 格式 显示 视频 。 


(以 知识 拓展 
视频 格式 与 浏览 器 的 支持 

在 Dreamweaver CC 2018 中 ，<video> 元 素 支 持 以 下 六 种 视频 格式 。 

MP4: 带 有 H.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 。 

WebM: 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 

Ogg: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 

3GP: 是 MP4 格式 的 一 种 简化 版 本 ， 视 频 编码 采用 MPEG-4 及 H.263， 音 频 编码 采用 AAC 或 
AMR。 

Ogv: 是 HTML5 中 的 一 个 名 为 Ogg Theora 的 视频 格式 ， 起 源 于 Ogg 容器 格式 。 

M4v: 是 MP4 格式 高 清 的 代表 ， 应 用 于 网 络 视频 点 播 网 站 和 移动 手持 设备 ， 视 频 编码 采用 H264/ 
AVC， 音 频 编码 采用 AAC。 

常用 浏览 器 和 支持 的 视频 格式 如 下 表 所 示 。 


浏览 器 Ogg 
Intemet Explorer 9 否 
Firefox 4.0 是 
Google Chrome 6 是 
Apple Safari 5 否 
Opera 10.6 是 


和 站/ 提示 : 使 用 多 重 选择 可 以 快速 指定 “ 源 ”/“Alt 源 1”/ “Alt 源 2"， 方 法 如 下 : 在 选择 文件 
时 为 同一 视频 选择 三 个 视频 格式 ,列表 中 的 第 一 个 格式 将 用 于 “ 源 ”, 其 他 两 个 格式 用 于 自动 填写 “Alt 
源 1” 和 “Alt 源 2”。 


Title (标题 ): 为 视频 指定 标题 。 
宽度 | 高 度 ( WIH ): 视频 的 宽度 和 高 度 ， 以 像素 为 单位 。 
控件 ( Controls ): 选择 是 否 显 示 视 频 播放 控件 ， 如 播放 、 暂 停 和 静音 。 
自动 播放 ( AutoPlay ): 视频 是 否 一 旦 在 网 页 上 加 载 便 开始 播放 。 
海报 (Poster ): 在 视频 完成 下 载 后 或 用 户 单 击 “播放 ”后 显示 的 图 像 的 位 置 。 当 插入 图 像 时 ， 自 
动 填充 宽度 和 高 度 值 。 
循环 (Loop ): 视频 是 否 连续 播放 ， 直 到 用 户 停止 播放 视频 。 
音 〈《Muted ): 设置 视频 的 音频 部 分 是 否 静音 。 
Flash 回 退 : 指定 不 支持 HTML 5 视频 的 浏览 器 播放 的 SWF 文件 。 
回 退 文本 : 指定 不 支持 HIMLS 的 浏览 器 显示 的 文本 。 
预 加 载 ( Preload ): 指定 页 面 加载 时 视频 加 载 的 首选 项 。 选 择 “自动 ”会 在 页 面 下载 时 加 载 整 个 
视频 ; 选择 “元 数据 ”会 在 页 面 下 载 完成 之 后 仅 下 载 元 数据 。 
例如 ， 设 置 源 为 ogg-19M.ogg， 宽 度 为 376px， 高 度 为 242px， 其 他 保留 默认 设置 。 保 存 文件 后 在 浏览 
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器 ( FireFox ) 中 的 预览 效果 如 图 7-30 (a ) 所 示 ， 单 击 播放 按钮 ， 即 可 播放 视频 文件 ， 如 图 7-30(b ) 所 示 。 


2 . 心 局 


(a) (b) 
图 7-30 在 浏览 器 中 查看 视频 效果 


嫩 注 意 : 如 果 MP4 格 式 的 视频 不 能 使 用 <video> 标签 在 浏览 器 中 播放 ,排除 浏览 器 支持 的 问题 ， 
应 是 视频 使 用 的 编码 不 是 H.264， 转 换 一 下 编码 即 可 。 


7.1.5 插入 Canvas 


Canvas 元 素 是 自 HTML5 出 现 的 新 标签 ， 用 于 在 网 页 上 绘制 图 像 。 不 过 ，<canvas> 元 素 本 身 并 没有 
绘图 能 力 ， 它 仅仅 是 图 形 的 容器 ( 通常 称 为 画布 )， 必 须 使 用 脚本 ( 通常 为 JavaScript ) 来 完成 实际 的 绘 
图 任务 。 

在 “设计 ”视图 中 ,执行 “插入 ”|“HTML”|“Canvas” 命令 ,或 在 “HTML” 插入 面板 上 单 击 “Canvas” 
按钮 图 (图 7-31) ， 即 可 在 插入 点 插入 Canvas 的 占 位 符 ， 如 图 7-32 所 示 。 


图 7-31 单 击 “Canvas” 按 钮 图 7-32 ”Canvas 前 占 位 符 


画布 是 一 个 矩形 区 域 ， 默 认 情 况 下 没有 边框 和 内 容 ， 需 要 指定 ID 属性 、width 和 height 属性 定义 画 
布 的 大 小 。 选 中 页 面 上 的 画布 占 位 符 ， 在 如 图 7-33 所 示 的 “属性 ”面板 上 可 以 设置 这 些 属性 。 
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例如 ， 设 置 D 为 myCanvas， 宽 为 376 像素 ， 高 为 242 像素 ， 此 时 的 页 面 效果 如 图 7-34 所 示 。 


在 “代码 ”视图 中 的 <body></body> 之 间 添 加 以 下 代码 , 可 以 在 画布 上 显示 文本 和 一 个 圆 , 如 


所 示 。 


Hello World 


图 7-34 设置 宽 和 高 的 画布 图 7-35 在 画布 上 给 制图 形 


<script type="text/javascript"> 
// 使 用 id 来 寻找 canvas 元 素 
Var c=document .getElementById("myCanvas");} 
// 创建 context 对 象 ctx 
//getcontext("2d") 对 象 是 内 建 的 HTML5 对 象 ， 有 多 种 绘制 路 径 、 图 形 、 字 符 以 及 添加 图 像 的 方法 
Var ctx=c.getContext("2d")} 
// 定义 字号 和 字体 
ctx.font="30px Times New Roman" 
// 使 用 fl1Style 方法 设置 填充 色 为 橙色 
ctx.fillstyle="#FF6600"} 
// 在 canvas 上 绘制 实心 的 文本 Hello World， 坐标 为 (50,50) 
//canvas 的 左上 角 坐 标 为 (0,0) 
ctx.fillText ("Hello World",50,50); 
// 确定 路 径 开始 点 
ctx.beginPath()}; 
// 逆 时 针 绘 制 半径 为 50 的 圆 弧 ， 圆 心 坐标 为 (150,150) ,开始 角度 为 6， 结束 角度 为 2" 
ctx.arc(150，150，50，0，Math.PI * 2, true); 
// 关闭 路 径 
ctx.closePath(); 
// 设置 填充 色 
ctx.fillstyle="#00FFFF";} 
// 填充 图 形 
ctx.fill()} 
</script> 


TE 


Y 注意 : Intemet Explorer 8 以 及 更 早 的 版 本 不 支持 <canvas> 元 素 。 


7.1.6 ”插入 动画 合成 


Dreamweaver CC 2018 支持 导入 在 Animate 中 创建 的 动画 合成 文件 ( OAM 文件 )。 
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&) 提示 : OAM (.oam) 动画 合成 文件 是 通过 Animate， 将 创建 的 HIML5 Canvas、ActionScript 
或 WebGL 格式 的 Animate 内 容 导 出 的 OAM 包 。Animate 由 原 Adobe Flash Professional 更 名 而 来 ， 
在 继续 支持 Flash SWF、AIR 格式 的 同时 ， 新 增 HTML 5 创作 工具 ， 支 持 HTML5Canvas、WebGL， 
并 能 通过 可 扩展 架构 支持 包括 SVG 在 内 的 几乎 任何 动画 格式 。 


首先 保存 文件 ， 然 后 执行 “插入 ”| “HTML”|“ 动 画 合成 ”命令 , 或 
在 “HTML” 插 和 人 面板 上 单 击 “动画 合成 ”按钮 (图 7-36 ) , 在 弹出 的 “ 选 
择 动画 合成 ”对 话 框 中 选择 需要 的 OAM 动画 文件 ， 单 击 “确定 ”按钮 ， 
即 可 指定 位 置 插入 动画 。 

默认 情况 下 ，OAM 文件 的 内 容 被 提取 到 animation_assets 文件 夹 ， 并 
且 会 创建 与 动画 文件 同名 的 子 文件 来。OAM 文件 的 内 容 被 放 在 此 位 置 下 的 
Assets 文件 夹 中 。 

如 果 要 更 改 默认 位 置 ， 可 以 执行 “站 点 ”|“ 新 建站 点 ”|“ 高 级 设 
置 ”|“Animate 资源 ”命令 ， 在 “资源 文件 夹 ”(Asset Folder) 中 ， 修 改 提 ”图 7-36 单 击 “ 动 画 合 成 ”按钮 
取 文 件 的 位 置 。 


7.2 插入 音频 


如 何 能 使 设计 的 网 站 与 众 不 同 、 充 满 个 性 ， 一 直 是 广大 网 页 设计 者 不 懈 追 求 的 目标 。 除 了 尽量 
提高 页 面 的 视觉 效果 、 互 动 功能 , 在 页 面 中 插入 能 突出 网 页 主题 氛围 的 声音 , 也 会 使 网 站 增色 不 少 。 

在 这 里 ， 读 者 需要 注意 的 是 ， 在 访问 插入 了 音频 的 页 面 时 ， 用 户 客户 端 浏 览 器 应 有 播放 所 选 声音 文 
件 的 适当 插件 ， 和 否则 声音 不 能 播放 。 


7.2.1 网 页 中 常用 的 音频 格式 


在 网 页 中 可 以 添加 多 种 类 型 的 声音 文件 格式 ， 不 同类 型 的 声音 文件 有 不 同 的 特点 。 在 确定 添加 的 声 

音 文件 的 格式 之 前 ， 用 户 需要 考虑 一 些 因素 ， 例 如 添加 声音 的 目的 、 受 众 、 文 件 大 小 、 声 音 品质 和 不 同 

的 声音 格式 在 不 同 浏览 器 中 的 差异 。 

和 midi 或 mid ( 乐器 数字 接口 ) 格式 : 顾名思义 ， 是 一 种 主要 用 于 器 乐 的 音频 格式 ， 许 多 浏览 器 不 
需要 插件 就 能 播放 MIDI 文 件 。 尽 管 其 声音 品质 非常 好 ， 很 小 的 MIDI 文 件 能 提供 较 长 时 间 的 声 
音 剪辑 ， 但 访问 者 的 声卡 不 同 ， 声 音效 果 也 会 有 所 不 同 。 另 外 ，MIDI 文件 不 能 被 录制 ， 必 须 使 
用 特殊 的 硬件 和 软件 在 计算 机 上 合成 。 

和 .wav( Waveform 扩展 名 ) 格式 : 这 种 格式 的 声音 具有 较 好 的 声音 品质 ， 许 多 浏览 器 不 要 求 插件 支 
持 ， 用 户 可 以 从 CD、 人 磁带、 麦克 风 等 录制 WAV 文件 。 但 是 文件 体积 较 大 ， 限 制 了 可 以 在 网 页 

中 使 用 的 声音 剪辑 的 长 度 。 

Si .aif ( 音频 交换 文件 格式 ， 即 AIFF ) 格式 : 与 WAV 格式 类 似 ， 具 有 较 好 的 声音 品质 ， 大 多 数 浏览 
器 都 可 以 播放 它 并 且 不 要 求 插件 ， 可 以 从 CD、 磁带、 麦克 风 等 录制 AIFF 文件 。 但 这 种 格式 的 
文件 较 大 ， 限 制 了 可 以 在 Web 页 面 上 使 用 的 声音 剪辑 的 长 度 。 

和 mp3 ( 运动 图 像 专家 组 音频 ， 即 MPEG- 音频 层 -3 ) 格式 : 这 是 一 种 压缩 格式 ， 可 以 在 明显 减 
小 声音 文件 大 小 的 同时 保持 非常 好 的 声音 品质 ， 其 质量 甚至 可 以 和 CD 质量 相 媲美 。 此 外 ， 这 
种 技术 可 以 对 文件 进行 “ 流 式 处 理 "， 访 问 者 不 必 等 待 整个 文件 下 载 完 即 可 收听 。 若 要 播放 
MP3 文件 ， 访 问 者 必须 下 载 并 安装 辅助 应 用 程序 或 插件 ， 例 如 QuickTime 、Windows Media 
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和 Ia、ram、:Ipm 或 Real Audio 格式 : 具有 非常 高 的 压缩 程度 ， 并 支持 “ 流 式 处理 "。 其 声音 品质 
比 MP3 文件 声音 品质 差 ， 而 且 访 问 者 必须 下 载 并 安装 RealPlayer 应 用 程序 或 插件 才 可 以 播放 这 
些 文件 。 
7.2.2 ”上 机 练习 


链接 到 音频 文件 是 指 将 声音 文件 作为 页 面 上 某 种 元 素 的 超 链接 目标 。 这 种 集成 声音 文件 的 方法 可 以 
使 访问 者 选择 是 否 要 收听 该 文件 。 现 在 Pternet 上 大 量 的 在 线 音乐 就 是 采用 这 种 方式 添加 声音 文件 。 


二 冰 习 目标 


通过 实例 学 习 如 何在 网 页 中 通过 超 链接 打开 声音 文件 。 


声音 


/设计 思路 
首先 打开 一 个 已 设置 页 面 背景 和 布局 的 网 页 文件 ， 然 后 选中 要 链接 到 音 ”7-2 上 机 练习 一 -链接 
频 文件 的 文本 ， 在 “属性 ”面板 上 的 “链接 ”文本 框 中 设置 链接 目标 为 需要 到 声音 文件 


的 音频 文件 ， 最 后 保存 文件 ， 在 浏览 器 中 预览 页 面 效果 。 


户 罗 操作 步 对 


(1) 打开 文件 。 执 行 “ 文 件 ” | “打开 ”命令 ,打开 一 个 创建 好 的 HTML 文件 ,页 面 效果 如 图 7-37 所 示 。 
(2 ) 添加 超 链 接 。 选 中 “Careless Whisper"， 打 开 “ 属 性 ”面板 ， 单 击 “ 链 接 ” 文 本 框 右 侧 的 “浏览 
文件 "按钮 贺 |, 在 弹出 的 对 话 框 中 找到 需要 的 音频 文件 ,如 图 7-38 所 示 ,然后 单 击 “确定” 按钮 关闭 对 话 框 。 
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essa) Ga) (es) 
7-37 ”页面 效果 图 7-38 “选择 文件 ”对 话 杠 


(3 ) 添加 其 他 超 链接 。 按 照 上 一 步 同 样 的 方法 ,选中 其 他 歌曲 名 称 , 在 “属性 ”面板 上 添加 超级 链接 ， 
效果 如 图 7-39 所 示 。 

(4) 保存 文件 。 执 行 “ 文 件 ”|“ 保 存 ” 命 令 保存 文件 。 在 浏览 器 中 单 击 添加 了 超 链接 的 文本 ， 将 启 
动 本 地 计算 机 上 的 播放 器 播放 指定 的 音乐 ， 如 图 7-40 所 示 。 用 鼠标 右键 单 击 文字 ， 在 弹出 的 快捷 菜单 中 
选择 “目标 另存 为 ”命令 ， 可 以 将 音乐 文件 下 载 到 本 地 ， 如 图 7-41 所 示 。 
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图 7-41 “目标 另存 为 ”命令 


7.2.3 ”将 声音 嵌入 网 页 


将 声音 嵌入 网 页 是 将 声音 播放 器 直接 插入 页 面 中 ， 当 访问 者 的 计算 机 上 安装 有 适当 的 插件 时 ， 声 音 
即 可 播放 。 这 种 方式 可 以 在 页 面 上 显示 播放 器 的 外 观 ， 对 声音 播放 进行 控制 。 

在 “设计 ”视图 中 ,将 插入 点 放置 在 要 嵌入 音频 文件 的 位 置 ,执行 “插入 ”| "HIML”| “插件 ”命令 ， 
或 者 在 “HTML” 插 入 面板 上 单 击 “ 插 件 ”按钮 (图 7-42 ) ， 在 弹出 的 “选择 文件 ”对 话 框 中 选择 一 个 
需要 的 音乐 文件 ， 单 击 “确定 ”按钮 ， 即 可 插入 一 个 插件 ， 如 图 7-43 所 示 。 


图 7-42 选择 “插件 ”命令 图 7-43 插件 占 位 符 


选中 页 面 中 的 插件 占 位 符 ， 打开“ 属性 ”面板 ， 可 以 看 到 如 图 7-44 所 示 的 属性 。 
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图 7-44 插件 属性 


9 宽 、 高 : 用 于 指定 插件 的 宽度 和 高 度 。 默 认为 32 x 32， 如 果 要 在 页 面 上 隐藏 播放 器 ， 可 以 将 宽 和 
高 设置 为 0。 
源 文件 : 用 于 指定 要 播放 的 音频 或 视频 文件 。 

插件 URL: 用 于 指定 播放 插件 的 地 址 。 如 果 用 户 的 计算 机 中 没有 安装 相关 的 播放 插件 ， 将 从 指定 
的 URL 下 载 该 插件 。 

和 对 齐 : 用 于 设置 插件 与 周围 网 页 元 素 的 对 齐 方式 。 

9 垂直 边 距 : 指定 插件 与 其 上 、 下 的 网 页 元 素 的 间隔 。 

和 水 平 边 距 : 指定 插件 与 其 左 、 右 的 网 页 元 素 的 间隔 。 
a 
i 


此 丝 


边框 : 设置 播放 插件 的 边框 宽度 。 
参数 : 单 击 该 按钮 将 弹出 “参数 ”对 话 框 ， 可 以 设置 参数 及 对 应 的 值 ， 从 而 控制 音频 或 视频 的 播 
放 方 式 。 
例如 ， 设 置 插件 的 宽 和 高 分 别 为 330 和 40 ( 图 7-45 )， 保 存 文件 后 ， 在 浏览 器 中 的 预览 效果 ， 如 
图 7-46 所 示 。 从 图 7-46 中 可 以 看 出 ， 用 户 可 以 控制 音频 文件 的 播放 ， 例 如 设置 音量 、 播 放 、 暂 停 、 指 定 
声音 文件 的 开始 和 结束 点 等 


图 7-45 设置 插件 的 宽度 和 高 度 图 7-46 播放 音频 文件 


筷 / 提示 : 在 浏览 器 中 预览 页 面 时 ， 浏 览 器 可 能 会 限制 网 页 运行 可 以 访问 计算 机 的 脚本 或 者 
ActiveX 控件 。 用 户 可 以 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 单 击 “允许 阻止 的 内 容 ” 命 令 ， 即 可 
正常 预览 网 页 。 


7.2.4 上 机 练习 一 一 添加 背景 音乐 


二 朱 习 目标 


通过 实例 学 习 在 网 页 中 添加 背景 音乐 的 操 人 方法， 了解“ 参数” 对话 框 的 7-3 上 机 练习 
设置 方式 。 背 册 音乐 


添加 


设计 思路 
首先 打开 一 个 要 设置 背景 音乐 的 网 页 文件 ， 然 后 通过 插件 指定 需要 的 音乐 文件 ， 最 后 通过 “参数 " 
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对 话 框 设置 音乐 文件 循环 播放 ， 并 隐藏 播放 器 。 


记 胡 操作 步 取 
(1) 打开 文件 。 执 行 “ 文 件 ”|“ 打 开 ” 命 令 , 打 开 一 个 要 添加 背景 音乐 的 网 页 文件 ,如 图 7-47 所 示 。 


he beauriul 
tory of 


图 7-47 打开 文档 


(2 ) 添加 插件 。 将 鼠标 指针 置 于 要 放置 插件 的 位 置 ,执行 “插入 "|“HTML"|“ 插 件 " 命 令 , 在 弹出 的 “ 选 
择 文件 ”对 话 框 中 选择 需要 的 音频 文件 ， 单 击 “ 确 定 ”按钮 ， 在 指定 位 置 将 显示 一 个 插件 占 位 符 。 

(3 ) 设置 插件 属性 。 选 中 页 面 中 的 插件 占 位 符 ， 在 属性 面板 上 设置 宽度 为 300， 高 为 40， 其 他 属性 
保留 默认 设置 ， 此 时 的 页 面 效 果 如 图 7-48 所 示 。 


图 7-48 添加 的 插件 效果 


(4) 预览 效果 。 执 行 “文件 ”|“ 保 存 ”命令 保存 文件 ， 在 浏览 器 〈 正 6) 中 打开 网 页 时 ， 网 页 顶部 
将 显示 一 条 提示 信息 ， 告 知 用 户 为 确保 安全 性 , 正 已 限制 此 网 页 运行 脚本 或 ActiveX 控件 ， 且 播放 插件 
不 显示 。 在 提示 信息 上 单 击 鼠标 右键 ,在 弹出 的 快捷 菜单 中 选择 “允许 阻止 的 内 容 ” 命 令 , 如 图 7-49 所 示 。 
此 时 将 弹出 “安全 警告 " 对 话 框 ,如 图 7-50 所 示 。 单 击 “是 ”按钮 即 可 显示 播放 器 ,并 播放 指定 的 音乐 文件 ， 
效果 如 图 7-51 所 示 。 

按 默 认 方式 ， 音 乐 只 播放 一 次 。 接 下 来 通过 设置 参数 ， 使 音乐 循环 播放 。 
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着 计算 矶 | 保护 模式 , 梭 用 入 ”下 1006 ~ 


图 7-49 免 许 阻止 的 内 容 


允许 活动 内 容 (如 脚本 和 ActiveX 控件 ) 可 能 对 您 有 所 帮助 。 
会 危害 您 的 计算 机 。 


但 是 ， 活 动 内 容 可 能 也 
您 确实 要 让 此 文件 运行 活动 内 容 吗 ? 
Cd 二 
本 计算 册 | 保 六 模 z 大 用 而- 入 100% ~ 
图 7-50 “安全 警告 ”对 话 框 图 7-51 页 面 效 果 1 


(5 ) 设置 参数 循环 播放 。 选 中 文档 窗口 中 的 插件 占 位 符 , 单 击 “ 属 性 ” 面板 上 的 “参数 ”按钮 ,弹出 “ 参 
数 ” 对 话 框 ， 输 入 参数 名 称 LOOP， 值 为 tue， 如 图 7-52 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ,保存 文 
件 后 在 浏览 器 中 可 以 看 到 ,音乐 将 循环 播放 。 

为 使 页 面 更 美观 ， 接 下 来 隐藏 播放 器 。 

(6 ) 隐藏 播放 器 。 选 中 文档 窗口 中 的 插件 占 位 符 , 在 “属性 ”面板 上 设置 “ 宽 ”“ 高 ” 均 为 0, 如 图 7-53 
所 示 。 


图 7-52 设置 参数 和 值 图 7-53 设置 插件 的 宽 和 高 


7 ) 预览 页 面 。 执 行 “ 文 件 ”|“ 保 在 ”命令 保存 文件 , 按 F12 键 在 浏览 器 中 查看 页 面 效 果 , 如 图 7-54 
所 示 。 
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图 7-54 页面 效果 2 


昌 / 教 你 一 招 : 使 用 代码 嵌入 背景 音乐 
在 “代码 ”视图 中 ， 通 过 <bgsound> 标记 可 以 设置 背景 音乐 ， 步 又 如 下 : 
(1) 在 “代码 ”视图 中 ， 将 指针 定位 到 <body> 和 </body> 之 间 ， 输入 下 面 的 代码 : 


<bgsound src="media/example.mp3"/> 
// 网 页 和 声音 最 好 使 用 相对 路 径 


(2 ) 如 果 项 望 循环 播放 音乐 ， 在 代码 中 添加 一 个 loop 属性 即 可 : 


<bgsound src = "media/example.mp3" loop="true"/> 


(3 ) 保存 文件 ， 按 F12 键 在 浏览 器 中 预览 网 页 ， 即 可 听见 背景 音乐 。 


到 


7.2.5 ”插入 HTMLS 音频 


HTML5 音频 元 素 提供 一 种 将 音频 内 容 嵌 入 网 页 中 的 标准 方式 。 

在 “设计 ”视图 中 ,将 指针 放置 在 要 插入 音频 的 位 置 ,执行 “插入 ”| "HTML” | “HTML5 Audio” 命 令 ， 
或 在 “HTML” 插 入 面板 上 单 击 “HTML5 Audio” 按 钮 ( 图 7-55 ) ， 即 可 在 指定 位 置 插入 一 个 HIML5 
音频 占 位 符 ， 如 图 7-56 所 示 。 

选中 HIMLS 音频 对 象 的 占 位 符 ， 对 应 的 “属性 ”面板 如 图 7-57 所 示 。 


图 7-55 单 击 “HTML5 Audio” 按 钮 图 7-56 插入 的 HTML5 音频 占 值 符 
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图 7-57 HTML5 音频 的 “属性 ”面板 


9 源 |Alt 源 1Alt 源 2: 指定 音频 文件 的 位 置 。 不 同 浏览 器 对 音频 格式 的 支持 也 会 有 所 不 同 。 如 果 浏 
览 器 不 支持 “ 源 ” 中 指定 的 音频 格式 ， 则 会 使 用 “Alt 源 1” 或 “Alt 源 2” 中 指定 的 格式 。 
浏览 器 和 支持 的 音频 格式 如 下 表 所 示 。 


浏览 器 


Intemet Explorer 9 | 是 
Firefox 4.0 | 否 
Google Chrome 6 是 


Apple Safari 5 
Opera 10.6 


六/ 教 你 一 招 : 若 要 快速 指定 “ 源 ”| “Alt 源 1”| “Alt 源 2"， 可 以 使 用 多 重 选择 。 同 时 选择 同一 
音频 的 三 种 格式 ， 列 表 中 的 第 一 个 格式 将 用 于 “ 源 "， 其 他 两 种 格式 自动 填充 “Alt 源 1” 和 “Alt 源 2”。 


Title (标题 ); 设置 音频 文件 的 标题 。 
回 退 文本 : 在 不 支持 HTML 5 的 浏览 器 中 显示 的 文本 。 
Controls: 用 于 设置 是 否 要 在 HTML 页 面 中 显示 音频 控件 ， 如 播放 、 暂 停 和 静音 。 
Autoplay: 音频 一 旦 在 网 页 上 加 载 完成 就 开始 播放 。 
Loop: 音频 循环 播放 ， 直 到 用 户 使 用 播放 控件 停止 播放 。 
Muted: 在 加 载 完成 之 后 将 音频 静音 。 
preload: 选择 “自动 ”会 在 页 面 下 载 时 加 载 整个 音频 文件 。 选 择 “ 元 数据 ”会 在 页 面 下 载 完成 之 
后 仅 下 载 元 数据 。 
例如 ， 在 “ 源 ” 文 本 框 中 指定 要 加 载 的 音频 文件 ， 并 选中 “自动 播放 ” 复 选 框 ， 保 存 文件 后 ， 在 浏览 器 
(IE9 ) 中 预览 网 页 的 效果 如 图 7-58 (a ) 所 示 。 单 击 “人 允许 阻止 的 内 容 ” 按 钮 ， 显 示 效 果 如 图 7-58(b ) 所 示 ， 
页 面 上 将 显示 播放 器 控件 ， 并 自动 播放 。 
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(a) (b) 
图 7-58 在 浏览 器 中 预览 页 面 效果 
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好) 提示 : 如 果 在 浏览 器 中 不 能 显示 播放 控件 ， 可 能 是 当前 浏览 器 的 版 本 过 低 ， 不 支持 HTML5 
元 素 。 


7.3 实例 精 讲 一 一 多 媒体 页 面 制作 


二 全 上 


通过 前 面 对 基 础 知识 的 讲解 ， 结 合 实例 基因 本 章 学 到 的 知识 ， 以 达到 能 够 熟练 地 在 页 面 中 插入 多 媒 
体内 容 的 目的 。 
“设计 思路 

本 实例 制作 一 个 汽车 网 站 , 页 面 很 简单 ,可 以 分 为 上 、 中 、 下 三 个 部 分 。 上 部 是 整个 页 面 的 Flash 动画 ， 
中 间 部 分 又 可 以 分 为 3 行 2 列 分 别 进行 制作 ,并 在 相应 的 页 面 位 置 插入 HTMLS 视频 ,下 部 是 版 权 声明 部 分 。 
最 终 的 页 面 效果 如 图 7-59 所 示 ， 单 击 视频 的 播放 按钮 ， 即 可 播放 视频 。 


OAT 
和 不 二 的 要 计生 
2017 生 大江 < 对 


-> 
运 


人 三 
=? Eos? 


其 洽 s7 2016 款 0。 壬 尼 久 Q150 2016 数 。。 空 BW4 2014 避 WH 。。 关 条 法 2015 蒜 二 下 
po : 全 能 版 地 于 和 站 事 华 版 


图 7-59 页 面 效果 


各 制作 重点 
(1) 在 页 面 中 插入 Flash 动画 ， 并 实现 Flash 动画 背景 透明 。 
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(2 ) 在 页 面 中 插入 HTMLS5 视频 ， 并 在 “属性 ”面板 上 设置 视频 的 宽度 和 高 度 。 选 择 视频 时 ， 要 注 
意 视频 的 编码 方式 。 


户 鸭 操作 步 对 


7.3.1 规划 页 面 布 局 


7-4 规划 页 面 布局 


1. 新 建文 件 

启动 Dreamweaver CC 2018， 执 行 “文件 ”|“ 新 建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 选择 文 
档 类 型 为 HTML ， 无 框架 ， 单 击 “创建 ”按钮 新 建 一 个 空白 的 HIML 文件 。 

2. 设置 页 面 属性 

执行 “文件 ”|“ 页 面 属性 ”命令 ， 打 开 “ 页 面 属性 ”对 话 框 

(1 ) 设置 页 面 外 观 : 在 “外 观 ”( CSS ) 分 类 ,设置 字体 大 小 为 14px, 文本 颜色 为 #040242 ( 深蓝 色 ); 
左 、 右 、 上 、 下 边 距 为 0， 如 图 7-60 所 示 。 


攻守 | 


图 7-60 设置 页 面 儿 观 

(2 ) 设置 链接 文本 样式 : 在 “链接 ”( CSS ) 分 类 , 设置 字体 大 小 为 14px, 链接 颜色 为 #40242 ( 深蓝 
色 ); 下 画 线 样式 为 “始终 无 下 画 线 "”， 如 图 7-61 所 示 。 单 击 “ 确 定 ”按钮 关闭 对 话 框 。 
a 


| 三 


图 7-61 设置 链接 文本 样式 
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3. 插入 布局 表格 

执行 “插入 ”|“ 表 格 ” 命 令 ， 设置 行 数 为 4， 列 为 1， 表格 宽度 为 744 像素 ,边框 粗细 、 单 元 
格 边 距 和 单元 格 间 距 均 为 0。 选 中 页 面 上 的 表格 ,在 “属性 ”面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “ 居 
中 对 齐 ”。 

4. 定义 单元 格 背景 图 像 

(1 ) 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”|“ 新 建 ”命令 ， 弹 出 “新 建 CSS 规则 ” 
对 话 框 ， 输 入 选择 器 名 称 .topbg， 单 击 “确定 ”按钮 打开 对 应 的 规则 定义 对 话 框 。 

(2 ) 在 “背景 ”分 类 单 击 “ 浏 览 ” 按 钮 ， 选 择 背 景 图 像 ， 且 背景 不 重复 ( no-repeat )， 背 景 显 示 位 置 
为 水 平 “left”( 左 )， 垂 直 “top”( 顶端 )， 如 图 7-62 所 示 。 单 击 “确定 ”按钮 关闭 对 话 框 。 


| 


,topbg 的 CSS 规则 定义 


图 7-62 设置 背 几 图 和 像 和 显示 位 置 


(3 ) 将 鼠标 指针 放 在 第 1 行 单元 格 中 ,在 “属性 ”面板 上 设置 单元 格 “高 ”为 330, 然 后 在 “目标 规则 ” 
下 拉 列 表 中 选择 .topbg， 效 果 如 图 7-63 所 示 


www.citycar-com 


图 7-63 设置 单元 格 背 盎 的 效果 


(4) 按照 同样 的 方法 ， 设 置 第 2 行 单 元 格 的 高 度 ( 62 ) 和 背景 图 像 ， 如 图 7-64 所 示 。 
(5 ) 按照 同样 的 方法 ， 设 置 最 后 一 行 单元 格 的 高 度 ( 102 ) 和 背景 图 像 ， 如 图 7-65 所 示 。 
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图 7-65 设置 页 脚 的 背 加 图 像 


5. 插入 赃 套 表格 

(1) 选中 第 3 行 单 元 格 , 在 “属性 ”面板 上 设置 单元 格 内 容 垂 直 “ 顶 端 ” 对齐 ,然后 执行 “插入 ”| “ 表 
格 ”命令 ， 在 弹出 的 “表格 ”对 话 框 中 设置 行 数 为 6， 列 为 3， 表格 宽度 为 100 像素 。 在 “属性 ”面板 上 
设置 表格 ID 为 content。 

(2 ) 按 下 鼠标 左 键 拖 动 选 中 第 1 列 单元 格 ， 单 击 “属性 ”面板 上 的 “合并 单元 格 ”按钮 ,“ 宽 ”为 
20; 同样 的 方法 合并 第 3 列 单元 格 ， 宽 为 20; 合并 第 1 行 和 第 6 行 ,“ 高 ”为 10; 然后 分 别 合并 第 2 行 至 
第 5 行 ， 效 果 如 图 7-66 所 示 。 


图 7-66 ”合并 单元 格 效果 
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6. 插入 嵌 套 表格 
(1 ) 选中 嵌 套 表格 的 第 2 行 单元 格 , 在 “属性 ”面板 上 设置 单元 格 内 容 垂 直 “ 顶 端 ” 对 齐 , 然后 执行 
“插入 ”|“ 表 格 ” 命 令 ， 插 入 一 个 5 行 5 列 ， 宽 度 为 100 像素 的 表格 ， 如 图 7-67 所 示 。 


2 ww onyear com — 


图 7-67 插入 府 套 表格 


(2 ) 按 下 鼠标 左 键 拖 动 选 中 第 1 行 第 1 列 和 第 2 列 单元 格 , 单 击 “ 属 性 ”面板 上 的 “合并 单元 格 " 按 钮 ; 
同样 的 方法 合并 第 1 行 第 4 列 和 第 5 列 单元 格 ; 合并 第 2 行 和 第 5 行 ; 然后 分 别 合并 第 3 行 第 1 列 和 第 4 
行 第 1 列 、 第 3 行 第 5 列 和 第 4 行 第 5 列 ， 效 果 如 图 7-68 所 示 


图 7-68 ”合并 单元 格 效果 


7. 保存 文件 
执行 “文件 ”| “保存 ”命令 ,在 弹出 的 “另存 为 ”对 话 框 中 输入 文件 名 称 , 单 击 “ 保 存 ” 按钮 保存 文件 。 


7.3.2 ”制作 正文 区 域 


1. 插入 图 像 
选中 第 1 行 单元 格 , 在 “属性 ”面板 上 设置 单元 格 内 容 垂 直 “ 顶 端 ” 对 齐 ， 然 后 执行 “插入 ”| “图 像 ” 


命令 ,在 第 1 行 的 三 列 单元 格 中 分 别 插入 图 像 ; 同样 的 方法 ， 在 第 3 行 第 1 列 和 第 5 列 插入 图 像 。 选 中 第 
2 行 至 第 4 行 单元 格 , 在 “属性 ”面板 上 设置 单元 格 的 背景 颜色 为 浅 灰 色 ( 三 FEFEF ), 效果 如 图 7-69 所 示 。 


7-5 ”制作 正文 区 域 


图 7-69 插入 图 像 
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2. 制作 “ 热 销 车 型 ”栏目 

(1 ) 选中 第 3 行 第 2 列 单元 格 , 在 “属性 ”面板 上 设置 单元 格 内 容 垂 直 “ 顶 端 ”对 齐 , 然后 执行 “ 插 
入 ”|“ 表 格 ” 命 令 , 设置 行 数 为 4, 列 为 1, 表格 宽度 为 100%。 选 中 第 1 行 , 执行 “插入 ”|“ 图 像 ”命令 ， 
插入 图 像 ; 选中 其 他 三 行 单元 格 ， 设 置 单元 格 高 度 为 23。 此 时 的 页 面 效果 如 图 7-70 所 示 。 


。 热 销 车 型 。 汽车 丙 读 


图 7-70 设置 钳 套 表格 的 图 像 和 单元 格 高 度 效果 


(2 ) 设置 分 隔 栏 的 背景 图 像 。 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”|“ 新 建 ”命令 ， 
弹出 “新 建 CSS 规则 ”对 话 框 ， 输 入 选择 器 名 称 -fenge， 单 击 “确定 ”按钮 打开 对 应 的 规则 定义 对 话 框 。 
在 “背景 ”分 类 中 设置 背景 图 像 ， 且 图 像 垂 直 平 铺 ( repeat-y )， 如 图 7-71 所 示 。 单 击 “确定 ”按钮 关闭 


对 话 框 。 


fenge 的 CSS 规则 定义 [| 


图 7-71 设置 单元 格 背 景 图 像 和 排列 方式 


(3 ) 应 用 样式 。 将 鼠标 指针 放 在 第 2 列 单元 格 中 ,在 “属性 ”面板 上 的 “目标 规则 ”下 拉 列 表 中 选 
择 “.fenge"。 同 样 的 方法 ， 新 建 CSS 规则 .box 指定 第 3 列 单元 格 的 背景 图 像 ， 宽 为 415。 应 用 规则 后 的 
效果 如 图 7-72 所 示 


图 7-72 ”设置 单元 格 的 背 央 图 像 效 果 
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(4 ) 按照 第 (3 ) 步 同 样 的 方法 创建 CSS 规则 .line, 定义 底 边 线 样式 , 背景 图 像 横向 平 铺 (repeat-x )， 
如 图 7-73 所 示 。 选 中 第 5 行 单元 格 , 在 “属性 ” 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 .line, 然 后 切换 到 “ 代 
码 ” 视 图 ， 删 除 单元 格 中 多 余 的 空格 。 此 时 的 页 面 在 浏览 器 中 的 预览 效果 如 图 7-74 所 示 。 


Jine 的 CSS 规则 定义 | 


图 7-73 设置 背山 图 像 及 显示 方式 


。 扰 销 车 型 汽车 资讯 


re 


7-74 ”添加 底 廊 线 的 效果 


3. 插入 图 像 
选中 表格 content 的 第 5 行 ,在 “属性 ” 面板 上 设置 单元 格 内 容 垂直 “顶端 ”" 对齐, 然后 执行 “插入 ”| “图 


像 ”命令 ,在 弹出 的 对 话 框 中 选择 需要 的 图 像 文 件 ， 如 图 7-75 所 示 。 


Em 


~ 启动 276 下 马力 的 注 注 激情 ， 
Op 


图 7-75 插入 图 像 2 


4. 制作 “推荐 车 辆 ”栏目 
(1 ) 插入 嵌 套 表格 。 选 中 表格 content 的 第 6 行 , 在 “属性 ”面板 上 设置 单元 格 内 容 垂直“ 顶端 ”对 
齐 ， 然 后 执行 “插入 ”|“ 表 格 ” 命 令 ， 在 弹出 的 “表格 ”对 话 框 中 设置 行 数 为 3， 列 为 3， 表 格 宽度 为 
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100%6， 边 框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 为 0， 单 击 “确定 ”按钮 关闭 对 话 框 ， 如 图 7-76 所 示 。 


图 7-76 插入 嵌 套 表格 


(2 ) 合并 单元 格 。 在 第 1 行 第 1 列 单元 格 中 按 下 鼠标 左 键 向 右 拖 动 到 第 3 列 , 单 击 “ 属 性 ”面板 上 的 
“合并 所 选单 元 格 "按钮 ; 同样 的 方法 ,合并 第 3 行 单元 格 。 按 下 Ctrl 键 单 击 第 2 行 第 1 列 和 第 3 列 ,在 “ 属 
性 ”面板 上 设置 单元 格 “ 宽 ”为 12， 效 果 如 图 7-77 所 示 。 


7-77 “合并 单元 格 效果 


(3 ) 插入 栏目 标题 。 选 中 第 1 行 单元 格 ， 在 “属性 ”面板 上 设置 单元 格 内 容 垂直 “顶端 ”对 齐 ， 然 
后 执行 “插入 ”|“ 图 像 ” 命 令 ， 在 弹出 的 对 话 框 中 选择 需要 的 图 像 文 件 ， 如 图 7-78 所 示 。 


月 动 276 匹 马力 的 海 济 泊 情 * 
Os © | 


图 7-78 插入 栏目 标题 
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(4) 设置 单元 格 背景 颜色 。 选 中 第 2 行 单元 格 ， 在 “属性 ”面板 上 设置 单元 格 的 背景 颜色 为 浅 灰色 
(#EFEFEF )， 如 图 7-79 所 示 。 


图 7-79 设置 单元 格 背 骨 颜 色 


(5 ) 插入 图像 。 选 中 第 2 行 所 有 单元 格 ， 在 “属性 ”面板 上 设置 单元 格 内 容 垂直 “顶端 ”对 齐 ， 然 
后 执行 “插入 ”|“ 图 像 ”命令 ， 


机 过 7 2016 歌 40 英吉 尼 地 060 2016 获 。 宝 Wb4 2014 歌 出 
上 TEST quattro 和. 下 因明 全 能 版 囊 千 轿 跑 车 


图 7-80 插入 图 像 3 


(6 ) 设置 底 边 线 。 选 中 第 3 行 单元 格 , 在 “属性 ”面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 line,“ 高 ” 
为 1。 然后 切换 到 “代码 ”视图 ， 删 除 单元 格 中 多 余 的 空格 。 

(7 ) 添加 空 行 。 为 美化 页 面 ， 可 以 在 图 像 所 在 行 上 、 下 添加 空 行 。 将 鼠标 指针 放 在 第 3 行 单元 格 中 ， 
单 击 鼠标 右键 ,在 弹出 的 快捷 莱 单 中 选择 “表格 ”|“ 插 入 行 或 列 ” 命 令 ， 在 弹出 的 “插入 行 或 列 ” 对 话 
框 中 选择 插入 “ 行 ”， 行 数 为 1， 位 置 为 “所 选 之 上 "， 如 图 7-81 (a ) 所 示 。 同 样 的 方法 ， 在 第 3 行 之 下 
插入 一 行 ， 如 图 7-81 (b ) 所 示 。 


插入 行 或 列 


图 7-81 “插入 行 或 列 ”对 话 框 
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5. 保存 文件 
执行 “文件 ”|“ 保 存 ” 命 令 , 保 存 文件 。 在 浏览 器 中 的 预览 效果 如 图 7-82 所 示 。 


奥迪 S7 2016 款 4.0 ee ie 人 人 凤 4 埃 尔 法 2 3.5L 
TFSI quattro 


图 7-82 ”页面 效果 


7.3.3 添加 媒体 对 象 


1. 插 入 Flash SWF 了 
将 鼠标 指针 放 在 第 1 行 单元 格 中 ,执行 “插入 ”| “HITML”| “Flash SWF” 命 令 ， 7-6 添加 媒体 对 象 
在 弹出 的 “选择 SWF” 对话 框 中 选择 制作 好 的 透明 Flash 动画 ， 单 击 “ 确 定 ”按钮 
关闭 对 话 框 。 此 时 页 面 上 将 显示 Flash 动画 的 占 位 符 ， 如 图 7-83 所 示 。 


图 7-83 Flash 动画 占 位 符 


2. 设置 Flash 动画 的 属性 

选中 页 面 上 的 Flash 动画 占 位 符 ， 在 “属性 ”面板 上 设置 宽 为 744， 高 为 330 ( 即 完 全 铺 满 第 1 行 单 
元 格 )， Wmode 选择 “透明 "， 并 且 选 中 “循环 " “自动 播放 ”选项 ， 如 图 7-84 所 示 。 此 时 的 页 面 在 浏览 
器 中 的 预览 效果 如 图 7-85 所 示 。 
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图 7-85 在 浏览 器 中 预览 动画 效果 


3. 制作 导航 栏 

(1 ) 输入 导航 文本 。 将 鼠标 指针 放 在 第 2 行 单元 格 中 ， 在 “属性 ”面板 上 设置 单元 格 内 容 水 平 “ 居 
中 对 齐 "， 垂 直 “ 居 中 ”， 然 后 执行 “插入 ”|“ 表 格 ” 命 令 ， 设 置 行 数 为 1， 列 为 6， 表格 宽度 为 100% 
在 单元 格 中 输入 导航 文本 ， 如 图 7-86 所 示 

(2 ) 设置 文本 字体 。 单 击 鼠 标 右键 , 新建 CSS 规则 .navfont, 在 “类 型 ”分 类 中 设置 字体 为 “微软 雅 
黑 "， 大 小 为 16px， 颜 色 为 #040242， 如 图 7-87 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 


网 站 首页 公司 介绍 汽车 商城 :维修 保养 精品 装具 ;高 己 服务 


图 7-86 ”插入 导航 文本 


.istyle 的 CSS 规则 定义 [| 


口 全 部 相同 (5) 口 全 部 相同 (F) 


图 7-87 设置 字体 、 字 号 和 颜色 
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(3 ) 应 用 样式 。 选 中 “网 站 首页 ”， 在 “属性 ”面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 “.navfont”; 
同样 的 方法 ， 为 其 他 导航 文本 应 用 样式 ， 如 图 7-88 所 示 。 


网 站 首页 :公司 介绍 ， ;汽车 商城 、_; 维修 保养 :精品 装具 :客户 服务 


图 7-88 应 用 文本 样式 


4. 插入 文本 列表 

在 “ 热 销 车 型 ”栏目 中 输入 文本 ， 新 建 规则 .listyle 定义 底 边 框 样式 为 dashed ( 虚线 )， 宽 度 为 1， 颜 
色 为 友 33333 ( 深 灰色 )， 如 图 7-89 所 示 。 单 击 “确定 ”按钮 关闭 对 话 框 。 选 中 文本 ， 在 “属性 ”面板 上 
的 “目标 规则 ”下 拉 列 表 中 选择 .listyle， 如 图 7-90 所 示 ， 文 本 下 方 显示 一 条 灰色 的 虚线 ， 


Jisgyle 的 CSS 规则 定义 基本 | 


口 全 部 相同 (5) 口 全 部 相同 ff 


图 7-89 ”定义 底 边 框 样式 


。 要 销 李 到 。 汽车 资讯 


图 7-90 ”文本 前 底 亡 框 样式 


名 注意 : 在 这 里 一 定 要 先 取消 选中 “全 部 相同 ” 复 选 框 ， 和 否则 将 设置 四 个 方向 的 边框 样式 。 


5. 插入 HTML5 视频 

将 鼠标 指针 放 在 “汽车 资讯 " 栏目 的 第 3 行 单元 格 中 ,执行 “插入 "| “HTML”| “HTMLS5 Video” 命令。 
选中 页 面 上 的 视频 占 位 符 , 在 “属性 ”面板 上 设置 宽 为 415 ,高 为 182 , 单 击 “ 源 ” 右 侧 的 “浏览 文件 ”按钮 ， 
在 弹出 的 对 话 框 中 选择 需要 的 视频 文件 ， 如 图 7-91 所 示 。 


第 7 章 
使 用 多 媒体 对 象 


图 7-91 设置 视频 属性 


6. 保存 文件 
执行 “文件 ”|“ 保 在” 命令 ， 保 存 文件 。 在 浏览 器 中 的 预览 效果 如 图 7-93 所 示 。 单 击 视频 的 播放 按 
钮 ， 即 可 播放 视频 ; 使 用 播放 控件 ， 还 可 以 设置 音量 、 全 屏 和 播放 的 起 始点 


。 热 销 桔 型 。 汽车 次 读 


图 7-93 ”视频 的 预览 效果 


7.3.4 制作 页 脚 


1. 插入 谋 套 表格 

选中 页 脚 所 在 单元 格 , 在 “属性 ” 面板 上 设置 单元 格 内 容 水 平 “ 居 中 对 齐 ” ,垂直 “居中 ”， 
然后 执行 “插入 ”|“ 表 格 ”命令 ,设置 行 数 为 1， 列 为 1， 表格 宽度 为 70 像素 。 在 单元 格 
中 输入 版 权 声明 ， 如 图 7-94 所 示 。 


7-7 制作 页 脚 


图 7-94 输入 版 权 声 明 


2. 定义 文本 样式 
单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”|“ 新 建 ”命令 ， 新建 CSS 规则 .footstyle, 在 
“类 型 ”分 类 中 设置 字号 为 13, 颜色 为 手 FFFFF ( 白色 ), 如 图 7-95 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 
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-footstyle 的 CSS 规则 定义 区 本 
CE 
图 7-95 ”定义 字号 和 颜色 
3. 应 用 样式 


选中 版 本 声明 文本 ,在 “属性 ”面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 .footstyle， 如 图 7-96 所 示 


erved CityCar 版 权 所 有 


图 7-96 应 用 文本 样式 


4. 保存 文件 
执行 “文件 ” |“ 保存” 命令 ， 保 存 文件 。 此 时 的 页 面 效果 如 图 7-97 所 示 ， 在 浏览 器 中 的 预览 效果 如 
图 7-59 所 示 


i 
二 


0 
和 国生 全 Er Co 


a 


图 7-97 页 面 效果 
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7.4 答疑 解 惑 
1. 为 什么 在 网 页 中 插入 的 Flash 动画 不 能 播放 ? 


答 : 首先 检查 站 点 路 径 中 是 否 包含 有 中 文 名 称 ， 如 果 有 ， 则 将 站 点 的 名 称 和 站 点 路 径 中 包含 的 文件 


夹 名 称 全 部 改 为 英文 名 称 。 

如 果 还 不 能 播放 , 则 可 能 是 未 安装 Flash 播放 控件 。 打 开 浏 览 器 ,选择 “工具 ”|“Internet 选项 ” 命 
然后 切换 到 “高 级 ”选项 卡 ,找到 “多 媒体 ”列表 ,选中 “在 网 页 中 播放 动画 ”和 “启用 第 三 方 浏览 器 扩 
复 选 框 。 关 闭 对 话 框 之 后 ， 刷 新 当前 页 面 ， 即 可 弹出 安装 播放 页 面 ， 按 照 提 示 安 装 即 可 。 

2. 在 Dreamweaver CC 2018 中 插入 的 透明 Flash 动画 背景 显示 有 背景 ， 如 何 处 理 ? 

答 : 选中 插入 的 Flash 动画 ， 在 “属性 ”面板 上 的 Wmode 属性 下 拉 列 表 中 选择 “透明 ”。 

3. 为 什么 HTMLS5 Video 播放 时 有 声音 却 没有 图 像 ? 


令 ， 


展 ” 


答 : 尽管 HTML 5 支持 的 视频 格式 有 多 种 ， 但 同一 种 格式 的 视频 可 能 会 有 不 同 的 编码 ， 例 如 MP4 格 
式 常 用 的 编码 就 有 三 种 : MPG4(xdiv)、MPG4(xvid) 和 AVC(h264)。HTML5 支持 的 MP4 是 指 带 有 H.264 
视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 ， 因 此 ， 即 使 都 是 MP4 格式 ,但 只 有 视频 编码 为 H.264 的 文 


件 可 以 播放 ， 其 他 两 种 不 能 播放 。 将 不 能 播放 的 视频 转换 为 了 264 编码 即 可 正常 播放 。 


7.5 学 习 效果 自 测 


一 、 选 择 题 

1. 在 Dreamweaver CC 2018 中 ， 下 列 关 于 插入 到 页 面 中 的 Flash 动画 说 法 中 错误 的 是 ( 为 
A. 具有 .fa 扩展 名 的 Flash 文件 尚未 在 Flash 中 发 布 ， 不 能 导入 Dreamweaver CC 2018 中 
B. Flash 动画 “属性 ”面板 上 的 “背景 颜色 ”用 于 修改 Flash 动画 的 背景 色 
C. 在 “属性 ”面板 中 ， 可 为 影片 设置 播放 参数 
D. 在 插入 Flash 动画 之 前 ， 应 先 保存 文件 

2. 以 下 人 ) 可 以 嵌入 页 面 中 。 
A. swf 影片 B. Ogg 视频 C.FLV D. midi 文 件 

3. 下 列 关于 Dreamweaver CC 2018 页 面 中 的 音频 的 说 法 中 错误 的 是 ( 
A. 只 要 在 页 面 中 插入 了 音频 ， 所 有 访问 该 页 面 的 浏览 器 都 可 以 播放 音频 
B. MP3 格式 是 一 种 压缩 格式 ， 可 以 在 明显 减 小 声音 文件 大 小 的 同时 保持 非常 好 的 声音 品质 
C. 如 果 浏 览 器 的 版 本 过 低 ， 将 不 能 显示 HTML5 音频 的 播放 控件 
D. 不 同 的 浏览 器 支持 的 HTMLS5 音频 格式 也 不 尽 相同 


二 、 判 断 题 


1. 如 果 在 文档 窗口 中 改变 了 Flash 文件 的 宽 或 高 ， 不 能 恢复 原来 的 尺寸 。( ) 
2. 在 Dreamweaver CC 2018 中 ， 可 以 为 页 面 添加 任何 格式 的 声音 和 视频 。( ) 


3.“ 累 进 式 下 载 视频 ”是 指 将 Flash 视频 文件 下 载 到 站 点 访问 者 的 硬盘 上 ， 然 后 播放 ， 并 且 允 许 在 下 


载 完 成 之 前 就 开始 播放 视频 文件 。( 
4. 在 “属性 ”面板 上 ， 可 以 直接 更 改 Flash 视频 的 类 型 。( ) 
5. 排除 浏览 器 支持 的 问题 ， 只 要 是 MP4 格式 的 视频 都 可 以 使 用 <video> 标签 播放 。( ) 
三 、 填 空 题 
1. .midi 或 .mid 格式 是 一 种 主要 用 于 ( ) 的 音频 格式 。 
2. 在 Dreamweaver CC 2018 中 ， 可 以 插入 ( ) 和 ) 两 种 Flash 元 素 。 
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3. 如 果 浏 览 器 不 支持 HTMLS5 视频 “ 源 ” 中 指定 的 ( ), 则 会 检查 ( ) 或 ( ), 选 择 ( 
显示 视频 。 

四 、 操 作 题 

1. 从 Internet 下 载 一 个 Flash 动画 ， 然 后 用 Dreamweaver CC 2018 将 其 插入 到 自己 编写 的 网 页 中 。 


2. 在 网 页 文档 中 插入 一 段 MP3 音乐 。 
3. 依照 本 章 的 实例 讲解 ， 练 习 制 作 一 个 多 媒体 页 面 。 


S88® 


: CsS+Div, 简单 地 说 ， 就 是 使 用 块 级 元 素 放置 页 面 内 ， 然 3 
用 CSS 规则 指定 块 元 素 的 位 置 、 大 小 和 呈现 方式 。 一 个 使 用 CSS+Div 

bb 布局 且 结 构 良 好 的 HTML 页 面 可 以 通过 CSS 以 任何 外 观 表现 出 来 ， 

lb 在 任何 网 络 设备 上 ( 包括 手机 、PDA 和 计算 机 ) 上 以 任何 外 观 呈 现 。 】 

Dreamweaver CC 2018 提供 了 “CSS 设计 器 ” 面板 ,可 以 通过 “CSS 3 

”设计 器 ”面板 以 很 直观 的 方式 创建 CSS 样式 表 ， 并 对 已 有 的 样式 表 进 

bE 行 管理 操作 。 3 


@ CSS 样式 表 的 概 念 和 基本 语法 
会 CSS 样式 表 的 各 种 属性 


令 创建 和 编辑 CSS 规则 

令 如 何 使 用 外 部 样式 表 文件 
使 如 何 创建 和 编辑 Div 布局 块 
使 常用 的 CSS 布局 版 式 
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8.1 了 解 CSS 样式 表 


CSS 是 Cascading Style Sheets ( 层 共 样式 表 ) 的 简称 ， 可 以 看 作 是 一 个 以 .css 为 文件 名 后 缀 的 文本 文 
件 ， 它 包含 了 一 些 CSS 标记 和 属性 值 。 网 页 设计 人 员 通 过 简单 地 更 改 CSS 文件 ， 可 以 轻松 、 有 效 地 改变 
网 页 的 整体 布局 、 颜 色 、 字 体 、 链 接 、 背 景 ， 从 而 减少 网 站 制作 和 维护 的 工作 量 。 

样式 表 由 样式 规则 组 成 ， 告 诉 浏览 器 怎样 去 呈现 一 个 文档 。CSS 样式 表 每 个 规则 的 组 成 包括 一 个 选 
择 符 (通常 是 一 个 HIML 的 元 素 ， 例 如 body、p ) 和 该 选择 符 所 接受 的 样式 。 定 义 一 个 元 素 可 使 用 多 种 
属性 ， 每 个 属性 带 一 个 值 ， 共 同 描述 选择 符 呈现 的 方式 。 样 式 规则 组 成 如 下 。 

选择 器 { 属性 1: 值 1; 属性 2: 值 2} 

单一 选择 符 的 复合 样式 声明 用 分 号 隔 开 。 

和 选择 器 : 选择 器 ( 也 称 选择 符 ) 是 指向 特别 样式 的 元 素 ， 任 何 HIML 元 素 都 可 以 是 一 个 CSS 的 

选择 器 。 选 择 器 可 分 为 四 种 : 类 、ID 、 标 签 和 复合 内 容 ， 详 细 内 容 在 8.2.1 节 进 行 讲解 。 

和 属性 : 通过 设置 选择 符 的 属性 指定 样式 。 属 性 包括 颜色 、 边 界 和 字体 等 。 

Y 值 : 值 是 一 个 属性 接受 的 指定 。 例 如 ， 属 性 “color” 能 接受 值 red。 

例如 : 

<head> 


<title> 第 一 个 css 例 子 </title> 
<style type="text/css"> 


hl { font-size: x-large; color: red } -级 标题 
h2 { font-size: large; color: blue } 

</style> 

</head> 

上 述 的 代码 把 样式 表 包 括 在 <style> 和 </style> 标签 中 ， i 


告诉 浏览 器 用 加 大 、 红 色 字 体 显示 一 级 标题 ; 用 大 号 、 蓝 色 字 
体 显示 二 级 标题 ， 如 图 8-1 所 示 。 其 中 ，hl 和 h2 是 选择 器 ; 
font-size 和 color 是 CSS 属性 ; x-large 、large 、red 和 blue 是 属 
性 的 值 。 

为 了 减少 样式 表 的 重复 声明 ， 可 以 定义 组 合 选择 符 。 例 如 ， 下 面 的 样式 代码 定义 文档 中 所 有 的 标题 
具有 相同 的 显示 颜色 和 字体 : 


hl，h2，h3，h4，h5，h6 { color: red; font-family: sans-serif } 


9 注释 ; 用 于 对 样式 表 进 行 说 明 , 便 于 理解 和 阅读 。 样 式 表 中 的 注释 使 用 * 和 */ 作为 起 止 符 ,例如 : 
/* COMMENTS CANNOT BE NESTED */ 


图 8-1 应 用 样式 后 的 标题 效果 


8.2 创建 CSS 规则 


运用 CSS 样式 表 可 以 一 次 对 若干 个 网 页 的 所 有 的 样式 进行 控制 。 通 过 直观 的 界面 可 以 定义 多 种 不 同 
的 CSS 设置， 这 些 设 置 不 仅 可 以 影响 到 网 页 中 的 任何 元 素 ， 而 且 当 CSS 样式 表 有 所 更 新 或 被 修改 之 后 ， 
所 有 应 用 该 样式 表 的 文档 都 会 自动 更 新 。 
8.2.1 认识 CSS 设计 器 


在 Dreamweaver CC 2018 中 ,利用 “CSS 设计 器 ”面板 可 以 很 直观 的 方式 创建 CSS 样式 ， 即 使 用 户 
对 CSS 属性 或 规则 不 熟悉 ， 也 能 创建 很 精美 的 样式 。 
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执行 “窗口 ”|“CSS 设计 器 ”命令 ， 即 可 打开 “CSS 设计 器 ”面板 ， 如 图 8-2 所 示 。 

和 全 部 :“ 全 部 ”模式 。 此 模式 列 出 当前 文档 中 的 所 有 CSS 、 媒 体 查询 和 选择 器 。 选 择 页 面 上 的 元 
素 时 ， 关 联 的 选择 器 、 媒 体 查询 或 CCS 不 会 在 CSS 设计 器 中 高 亮 显 示 。 通 常 使 用 这 种 模式 开始 
创建 CSS、 选 择 器 或 媒体 查询 。 

和 当前 :“ 当 前 ”模式 。 此 模式 列 出 当前 文档 的 “设计 "或 “实时 "视图 中 所 有 选 定 元 素 的 样式 。 在 “ 代 
码 ” 视 图 中 查看 CCS 文件 时 ， 将 显示 处 于 “焦点 ”状态 的 选择 器 的 所 有 属性 。 通 常 使 用 这 种 模 
式 来 编辑 与 文档 中 所 选 元 素 关 联 的 选择 器 的 属性 

和 源 : 列 出 与 文档 相关 的 所 有 CSS 样式 表 。 使 用 此 窗 格 可 以 创建 CSS 并 将 其 附加 到 文档 ， 或 定义 


文档 中 的 样式 
y @ 媒体 : 列 出 所 选 源 中 的 全 部 媒体 查询 。 如 果 不 选 择 特定 CSS， 则 显示 与 文档 关联 的 所 有 媒 
体 查询 


和 选择 器 : 列 出 所 选 源 中 的 全 部 选择 器 。 如 果 同 时 选择 了 一 个 媒体 查询 ， 则 会 为 该 媒体 查询 缩小 选 
择 器 列表 范围 。 如 果 没 有 选择 CSS 或 媒体 查询 ， 则 显示 文档 中 的 所 有 选择 器 
属性 : 显示 可 为 指定 的 选择 器 设置 的 属性 
CSS 设计 器 是 上 下 文 相关 的 。 也 就 是 说 ， 在 页 面 上 选 定 一 个 元 素 ， 可 以 在 CSS 设计 器 中 查看 关联 的 
选择 器 和 属性 。 而 且 ， 在 CSS 设计 器 中 选中 某 个 选择 器 时 ， 关 联 的 源 和 媒体 查询 将 在 各 自 的 窗 格 中 高 亮 


显示 。 
8.2.2 ”指定 使 用 CSS 的 方式 


在 网 页 中 使 用 CSS 规则 有 多 种 方法 。 打 开 “CSS 设计 器 ”面板 ， 单 击 “ 添 加 源 ” 按 钮 ， 在 弹出 的 下 
拉 列 表 中 可 以 选择 使 用 CSS 规则 的 方式 ， 如 图 8-3 所 示 


CSS 设计 器 
当前 


所 有 模式 : 列 出 整个 文档 的 规则 当前 杆 式 : 列 出 当前 所 选 内 容 的 规则 


图 8-2 “CSS 设计 器 ”浮动 面板 图 8-3 指定 使 用 CSS 规则 的 方式 


和 创建 新 的 CSS 文件 : 新 建 一 个 CSS 文件 用 于 当前 文档 。 选 择 该 项 ， 将 弹出 “创建 新 的 CSS 文件 ” 
对 话 框 , 如 图 8-4 所 示 。 单 击 “ 浏 览 ”按钮 , 在 弹出 的 对 话 框 中 指定 保存 CSS 文件 的 路 径 和 名 称 ， 
通常 保存 在 当前 文档 所 在 的 站 点 中 ， 如 图 8-5 所 示 

CSS 文件 指 一 个 包含 样式 和 格式 规范 的 外 部 文本 文件 。 
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中 刘 投 入门 A 售 
国 汪汪 式 去 文件 局 为 [ex] 
各自 加 文件 和 
保存 在 中: 下 t 四 - 
名 称 修改 日 期 类 
Bnotes 2016/6/2414:56 。 文 # 赤 四 
B ch03 2016/6/22 9:53 文件 夹 
Bd ch04 2016/11/30 16:30 文件 突 
创建 新 的 CSS 文件 Wcho5 2016/11/30 10:19 文件 夹 
Bcho6 2016/12/5 1200 文件 去 - 
xfaom: Cm] | ED 
保存 类 型 0) [样式 志 文 件 _@.essjj =] Cm 
有 条 件 使 用 证 WL le T/C ine pob/ rr oot/ te/ norstyle 
相 j 于 区 村 = 
在 站 点 定义 中 
要 使 用 此 选项 ， 请 保存 文件 。 
图 8-4 “创建 新 的 CSS 文件 ”对 话 框 图 8-5 “将 样式 表 文 件 另存 为 ”对 话 框 
和 附加 现 有 的 CSS 文件 : 将 已 定义 的 CSS 文件 导入 或 链接 到 当前 文档 。 选 择 该 项 ， 将 弹出 “使 用 


现 有 的 CSS 文件 ”对 话 框 ,如 图 8-6 所 示 。 单 击 “ 浏 
览 ”按钮 ， 在 弹出 的 对 话 框 中 选择 要 附加 的 CSS 文 
件 的 路 径 和 名 称 ， 然 后 选择 添加 方式 。 

“ 导 和 人 ”使 用 <import> 标签 将 CSS 文件 的 信息 添加 到 
当前 文档 中 ; 而 “链接 ”使 用 <link> 标签 将 CSS 文件 链接 有 有 条件 使 用 (可 选 
到 网 页 中 。“ 链 接 ” 可 以 提供 的 功能 更 多 ， 适 用 的 浏览 器 也 
更 多 。 

9 在 页 面 中 定义 : 直接 在 文档 内 定义 CSS。 即 在 文档 
代码 的 <head></head> 部 分 ， 使 用 <style></style> 
标签 定义 网 页 的 样式 规则 。 

8.2.3 定义 媒体 查询 

指定 CSS 文件 的 使 用 方式 后 ， 就 可 以 定义 媒体 查询 了 。 如 果 不 需要 定义 媒体 查询 ， 可 以 直接 进入 下 
一 节 学 习 。 

媒体 查询 可 以 根据 客户 端的 介质 和 屏幕 大 小 ， 提 供 不 同 的 样式 表 或 者 只 展示 样式 表 中 的 一 部 分 。 通 
过 响应 式 布局 ， 可 以 达到 只 使 用 单一 文件 提供 多 平台 的 兼容 性 。 

打开 “CSS 设计 器 ”面板 , 在 “@ 媒体 ” 窗 格 中 单 击 “ 添 加 媒体 查询 ”按钮 ， 弹 出 “定义 媒体 查询 ” 
对 话 框 ,如 图 8-7 所 示 。 根 据 需 要 选择 “条 件 ", 并 为 条 件 指定 媒体 类 型 。 熟 悉 代码 的 用 户 也 可 以 直接 在 “ 代 
码 ” 文 本 框 中 输入 不 同 设备 的 代码 ， 例 如 : 


@media screen and (min-width: 600px) { /* style sheet for screen */ } 


使 用 现 有 的 CSS 文件 


图 8-6 “使 用 现 有 的 CSS 文件 ”对 话 框 


昌 / 提示 : 通过 代码 添加 媒体 查询 条 件 时 ,“ 定 义 媒体 查询 ”对 话 框 中 只 显示 受 支 持 的 条 件 ， 但 
“代码 ”文本 框 会 完整 地 显示 代码 ( 包括 不 支持 的 条 件 )。 如 果 不 同 的 代码 段 有 冲突 或 者 重合 ， 则 按 
照 CSS 原本 的 代码 优先 级 排序 。 


+ 一 源 : newstylecss 


至 
newstylecss 
二 @ 棕 体 : 
定义 媒体 训 淘 
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图 8-7 “使 用 现 有 的 CSS 文件 ”对 话 框 


媒体 类 型 用 于 指定 要 应 用 样式 的 设备 。Dreamweaver CC 2018 中 默认 的 媒体 类 型 ， 如 图 8-8 


handheld: 指 手持 式 显示 设备 ( 小 屏幕 ， 单 色 ) 
braille: 盲文 系统 ， 指 有 触觉 效果 的 印刷 品 。 


tty: 固定 字母 间距 的 网 格 的 媒体 ， 比 如 电 传 打字 机 。 


所 示 。 
和 screen: 指 计算 机 屏幕 。 
3 print: 指 用 于 打印 机 的 不 透明 介质 
y 
和 aural: 指 语音 电子 合成 器 。 
] 
和 projection; 指 用 于 显示 的 项 目 。 
y 
3 tv: 指 电视 类 型 的 媒体 。 


print 
handheld 
aural 


braille 


projection 
tty 
ty 


图 8-8 ”媒体 类 型 列表 


入/ 提示 : 媒体 类 型 名 称 区 分 大 小 写 ， 主 流 平台 的 浏览 器 都 可 以 正确 支持 。 但 对 CSS3 中 新 增 
的 媒体 查询 ， 部 分 浏览 器 可 能 无 法 解读 。 通 常 使 用 only 关键 字 进行 hack。 例 如 : 


<link rel="stylesheet" href="example.css”media="only screen and (color)"> 


添加 only 关键 字 后 ， 支 持 媒体 查询 语句 的 浏览 器 依然 正常 解析 。 不 支持 媒体 查询 语句 但 能 正确 
读 取 媒 体 类 型 的 浏览 器 ， 由 于 先 读 取 到 only 而 不 是 screen ， 将 忽略 这 个 样式 。 不 支持 媒体 查询 的 


了 不论 是 否 有 only ， 


都 直接 忽略 样式 。 


如 果 要 添加 条 件 , 将 鼠标 指针 移 到 条 件 下 拉 列 表 框 上 , 右 侧 将 显示 “添加 条 件 ” 和 “ 移 除 条 件 ”按钮 ， 
如 图 8-9 所 示 。 单 击 “ 添 加 条 件 ” 按 钮 ， 即 可 添加 条 件 ， 且 两 个 条 件 间 显示 “And”。 


定义 媒体 查询 后 ， 自 


击 “ 确 定 ” 按 钮 ， 在 样式 表 文 件 中 可 


[以 看 到 自动 添加 的 媒体 查询 代码 。 
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| 


定义 媒体 得 询 


图 8-9 添加 条 件 


(以 知识 拓展 
在 页 面 中 声明 媒体 属性 
定义 媒体 查询 后 ， 在 页 面 中 声明 一 个 媒体 属性 有 以 下 三 种 方法 。 
1. 用 @import 引入 
方法 是 : @import+ 样式 表 文件 的 URL 地 址 + 媒体 类 型 ， 例 如 : 


aimport url(voice.css) speech; 


可 以 多 个 媒体 共用 一 个 样式 表 ， 媒 体 类 型 之 间 用 逗号 分 隔 。 

2. 用 @media 引入 

方法 是 : @media+ 媒体 类 型 ， 例 如 : 

amedia screen and (min-width:600px) { 

/* style sheet for screen */ 

从 上 面 的 代码 可 以 看 出 ，@import 和 @media 的 区 别 在 于 ，@import 引入 外 部 的 样式 表 ( voice. 
css ) 用 于 媒体 类 型 ，@media 直接 引入 媒体 属性 。 

3. 在 文档 <head> 标签 中 引入 

在 文档 <head> 标签 中 使 用 <LINK> 标签 和 media 属性 指定 媒体 类 
型 和 属性 ， 使 用 href 属性 指定 媒体 查询 所 在 的 外 部 样式 表 文 件 。 


<LINK rel="stylesheet" type="text/css" media="screen and (min- 
width: 600px)" href="foo.css"> 


newstylecss 


+ “6 所 体 :: (min-width : 300px ) 


8.2.4 指定 CSS 选择 器 

打开 “CSS 设计 器 ”面板 ,在 “ 源 ” 窗 格 中 选择 要 定义 CSS 选择 器 的 源 ， 
或 在 “@ 媒体 ” 窗 格 中 选择 要 定义 CSS 选择 器 的 媒体 查询 ， 然 后 在 “选择 
器 ” 窗 格 中 单 击 “ 添 加 选择 器 ”按钮 ， 如 图 8-10 所 示 。 在 出 现 的 空白 行 中 
输入 选择 器 名 称 。 

任何 HIML 元 素 都 可 以 是 一 个 CSS 的 选择 器 。 根 据 在 文档 中 选择 的 
元 素 ，CSS 设计 器 会 智能 确定 并 提示 使 用 相关 选择 器 ( 最 多 三 条 规则 )。 根 图 8-10 ”添加 选择 器 


第 8 章 195 


利用 CSS+Div 设 计 网 页 
据 声 明 的 不 同 可 把 选择 器 分 为 四 类 。 
1. 类 
创建 可 作为 类 属性 应 用 于 页 面 元 素 的 自 定义 样式 ， 可 应 用 于 任何 HIML 元 素 。 类 名 称 必 须 以 英文 字 
母 或 句点 (.) 开头 ， 后面 是 自 定义 名 称 ， 不 可 包含 空格 或 其 他 标点 符号 ,例如 firstStyle。 


例如 网 页 设计 者 希望 文本 在 不 同 段 落 使 用 不 同 的 颜色 显示 时 ， 可 以 定义 不 同 的 类 : 


.red { color: red } 
.green { color: green } 


以 上 的 例子 建立 red 和 .green 两 个 类 ， 供 不 同 的 段落 使 用 。 在 HIML 中 指明 元 素 使 用 的 样式 类 使 
class 属性 ， 例 如 : 


<p class=red> 段 文本 1</p> 
<p class=green> 段 文本 2</p> 


则 段 文本 1 使 用 .red 类 样式 , 文本 显示 为 红色 ; 段 文本 2 使 用 .green 类 样式 , 文本 显示 为 绿色 。 

2. 标签 

重 定义 特定 HTML 标签 的 默认 格式 。 标 签 选择 器 的 名 称 即 为 HTML 标签 。 例 如 : 

p{ line-height: 150%;} 

其 中 选择 器 是 段落 标签 p， 这 行 样式 代码 表示 将 网 页 中 所 有 段落 文本 的 行距 设置 为 150%。 

3. 复合 内 容 

复合 内 容 选 择 器 是 一 个 用 空格 分 隔 的 多 个 标签 或 选择 器 组 成 的 标签 组 合 ， 包 括 常用 字 的 a:active、 
ahover、a:link 和 a:visited。 复 合 内 容 选 择 器 的 优先 权 比 单一 的 选择 器 大 。 例 如 : 

p em { background: red } 

这 个 例子 中 的 复合 选择 器 是 pem。 这 行 样式 代码 表示 段落 中 的 强调 文本 显示 为 红色 背景 ， 而 标题 的 
强调 文本 则 不 受 影响 ， 

4.1D 

JID 选择 器 用 于 定义 指定 设置 了 ID 属性 的 元 素 的 样式 。ID 选择 器 名 称 必 须 以 英文 字母 开头 ， 且 在 名 
称 前 添加 “#"， 不 应 包含 空格 或 其 他 标点 符号 。 例 如 : 

#myid{ text-indent: 3em } 


使 用 了 D 选择 符 的 方式 如 下 : 


SS 设计 种 


+ 源 : newstyle.css 

<p id=myid> 文本 缩 进 3em</p> 所 有 0 
下 面 简要 介绍 一 下 对 选择 器 可 进行 的 常用 操作 : A 
9 搜索 选择 器 : 在 选择 器 窗 格 顶部 的 搜索 框 中 输入 选择 器 名 称 ， 然 50 

后 按 Enter 键 。 
和 重 命名 选择 器 : 双击 选择 器 名 称 ， 然 后 输入 所 需 的 名 称 。 
和 移动 选择 器 至 其 他 源 : 在 选择 器 名 称 上 按 下 鼠标 左 键 ， 拖 至 “ 源 ” 

窗 格 中 所 需 的 源 上 。 


复制 选择 器 中 的 样式 : 在 选择 器 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 
菜单 中 选择 需要 的 复制 命令 ， 如 图 8-11 所 示 。 可 以 复制 所 有 样式 
或 仅 复制 一 个 选择 器 中 的 布局 、 文 本 和 边框 等 特定 类 别 的 样式 到 
其 他 选择 器 中 。 


图 8-11 选择 复制 样式 
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9 复制 选择 器 并 将 其 添加 到 媒体 查询 中 : 在 选择 器 上 单 击 鼠 标 右键 ， 将 鼠标 悬 停 在 “复制 到 媒体 查 
询 中 ”上 ， 然 后 选择 该 子 菜单 中 的 媒体 查询 。 


嫩 注 意 : 只 有 选 定 的 选择 器 的 源 包 含 媒体 查询 时 , “复制 到 媒体 查询 中 ”选项 才 可 用 。 无 法 从 
一 个 源 将 选择 器 复制 到 另 一 个 源 的 媒体 查询 中 。 


8.2.5 设置 CSS 属性 


CSS 属性 分 为 布局 、 文 本 、 边 框 、 背 景 等 几 个 类 别 , 并 在 “属性 ” 窗 格 项 部 以 直观 、 友 好 的 图 标 表示 ， 
如 图 8-12 所 示 。 


息 / 提示 : 默认 情况 下 , 用 户 只 能 查看 已 设置 的 属性 , 如 果 要 查看 所 有 属性 , 取消 勾 选 “显示 集 ” 
复 选 框 即 可 。 


1. 指定 属性 值 
选中 要 指定 属性 的 选择 器 之 后 ， 在 “属性 ” 窗 格 顶 部 单 击 属性 类 别 图 标 ， 进 入 相应 的 属性 选项 卡 ， 
将 鼠标 指针 移 到 属性 右 侧 的 “ 值 ” 区 域 ， 执 行 以 下 操作 设置 属性 : 
9 弹出 值 列表 : 单 击 鼠 标 ， 即 可 弹出 值 列表 ， 如 图 8-13 所 示 。 在 列表 中 单 击 选择 需要 的 属性 值 。 
9 弹出 单位 列表 的 值 : 单 击 鼠 标 ， 即 可 弹出 单位 列表 ， 如 图 8-14 所 示 。 在 列表 中 单 击 选择 需要 的 单 
位 ， 然 后 输入 数值 。 


澳 属性 


昌国 日 国 日 


图 8-12 CSS 属性 面板 图 8-13 设置 属性 值 1 图 8-14 单 们 列表 


和 显示 为 图 标的 值 : 单 击 需 要 的 值 图 标 即 可 ， 如 图 8-15 所 示 的 float 和 clear 的 属性 值 。 
和 9 颜色 值 : 单 击 颜色 按钮 ， 即 可 弹出 调 色 板 ， 如 图 8-16 所 示 ， 在 调 色 板 中 选择 需要 的 颜色 。 
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Pe 
+ 属性 
员 回 日 图 日 


园 背 曲 


background- 
re : 辕 


图 8-15 设置 属性 值 2 图 8-16 设置 颜色 


2. 禁用 /删除 属性 值 

将 鼠标 指针 移 到 已 设置 值 的 属性 上 ,属性 右 侧 将 显示 “禁用 CSS 属性 " 贺 和 “删除 CSS 属性 ” 贺 图 标 ， 
如 图 8-17 所 示 。 单 击 需 要 的 图 标 即 可 。 禁 用 CSS 属性 后 的 值 状态 如 图 8-18 所 示 ; 删除 CSS 属性 或 未 设 
置 属性 值 时 的 值 状态 如 图 8-19 所 示 


height 

min-width 

min-height min-height 

max-width max-width 

max-height max-height 

display display 

hox-siinn hov-sbinn 

有 文档 的 规则 
图 8-17 已 设置 值 的 状态 图 8-18 禁用 CSS 属性 的 状态 

3. 自 定义 属性 


在 “属性 ” 窗 格 项 部 单 击 “ 更 多 ”按钮 图 ， 在 出 现 的 空 行 中 依次 输入 属性 名 称 和 属性 值 ， 输 入 时 将 
显示 代码 提示 ， 如 图 8-20 所 示 。 
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长 属性 
遇 国 昌国 日 


关 inherit 


g 忌 limportant 
max-width 
maxcheight 
display 

hox 


图 8-19 “删除 或 未 设置 值 的 状态 图 8-20 属性 值 提示 
8.2.6 上 机 练习 一 一 变化 的 鼠标 样式 


只 后 3 


通过 前 面 基础 知识 的 讲解 ， 结 合 本 节 的 练习 实例 ， 使 读者 进一步 掌握 创建 ” 8-1 上 机 练习 一 一 变化 


CSS 规则 的 具体 操作 方法 ， 了 解 常用 CSS 属性 的 功用 。 的 鼠标 样式 
设计 思路 


首先 新 建 一 个 空白 的 网 页 文件 ， 并 设置 页 面 的 背景 图 像 ， 创 建 CSS 规则 禁用 图 像 自 动 平 铺 ， 接 下 来 
在 页 面 中 添加 Div 布局 块 ,通过 ID 选择 器 对 布局 块 进行 定位 ， 然 后 自 定义 cursor 属性 ， 指 定 和 鼠标 指针 的 
样式 ， 如 图 8-21 所 示 。 鼠 标 指针 移 到 不 同 的 元 素 上 时 ， 显 示 不 同 的 形状 


图 8-21 变化 的 鼠标 


户 鸭 操作 步 时 

(1 ) 执行 “文件 ” |“ 新建 ”命令 , 在 弹出 的 “新 建文 档 ” 对 话 框 中 设置 文档 类 型 为 HTML, 无 框架 ， 
新 建 一 个 空白 的 HTML 文档 。 

(2 ) 执行 “文件 ”|“ 页 面 属性 ”命令 ， 弹 出 “页 面 属性 ”对 话 框 。 在 “外 观 ( CSS ) 分 类 页 面 单 击 
“浏览 ”按钮 选择 背景 图 像 ， 然 后 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

由 于 背景 图 像 的 尺寸 小 于 窗口 尺寸 ， 因 此 Dreamweaver CC 2018 会 自动 平 铺 (重复 ) 背景 图 像 填 满 
整个 窗口 ， 效 果 如 图 8-22 所 示 。 

(3 ) 使 用 CSS 样式 表 禁 用 图 像 平 铺 。 


地/ 提示 : 读者 可 以 在 “外 观 ”( CSS ) 分 类 页 面 的 “重复 ”下 拉 列 表 中 选择 “不 重复 ”禁用 图 
像 平 铺 功能 。 本 练习 为 使 读者 熟悉 “CSS 设计 器 ”面板 的 使 用 ,采用 CSS 属性 实现 这 一 功能 。 
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@ 执行 “窗口 ”|“CSS 设计 器 ”命令 ， 打 开 “CSS 设计 器 ”浮动 面板 。 
@@ 单 击 “CSS 设计 器 ”面板 上 的 “添加 源 ” 按钮 ,在 弹出 的 下 拉 菜 单 中 选择 “在 页 面 中 定义 ”, 如 图 8-23 
所 示 。 


CSS 设计 器 


/0 


和 


— 


- 


[ag vg 


图 8-22 图像 平 铺 效 果 图 8-23 添加 CSS 源 图 8-24 设置 文本 居中 对 齐 


鲜 单 击 “添加 选择 器 ”按钮 ， 在 出 现 的 空 行 中 输入 选择 器 名 称 body 

图 在 “属性 ” 窗 格 顶部 单 击 “ 文 本 ”按钮 圆 , 拖 动 滚动 条 找到 text-align 属性 , 然后 单 击 “ 居 中 对 齐 ” 
按钮 图 ,如 图 8-24 所 示 ; 在 “属性 ” 窗 格 项 部 单 击 “背景 " 按 饵 轩 |, 拖 动 深 动 条 找到 background-repeat 属性 ， 
然后 单 击 “ 不 重复 ”按钮 轿 ， 如 图 8-25 所 示 

此 时 ， 在 “设计 ”视图 中 可 以 看 到 背景 显示 在 页 面 的 左上 角 ， 且 不 重复 

(4) 在 页 面 上 单 击 ,执行 “插入 ”| “Div” 命 令 , 打 开 “ 插 入 Div” 对 话 框 ,设置 ID 为 content, 如 图 8-26 
所 示 ， 在 文档 窗口 中 插入 一 个 Div 布局 块 


background- 
eneat 


图 8-25 设置 背 央 图 像 不 重复 图 8-26 “插入 Div” 对 话 框 


(5 ) 删除 Div 标签 中 的 占 位 文本 ， 输 入 内 容 “鼠标 效果 ”和 “请 把 鼠标 移 到 相应 的 位 置 查看 效果 ”， 
两 段 文字 使 用 ShifttEnter 组 合 键 进 行 分 隔 。 选 中 “鼠标 效果 ”， 在 HTML 属性 面板 的 “格式 ”下 拉 列 表 
中 选择 “标题 1”"， 如 图 8-27 所 示 

(6) 另 起 一 行 ， 执行 “插入 ”|“Div” 命 令 ,， 插入 其 他 四 个 Div 布局 块 ，ID 分 别 为 contentl， 
content2 ，content3 和 content4， 并 输入 相应 的 文本 内 容 ， 如 图 8-28 所 示 。 

(7) 定义 CSS 规则 设置 Div 标签 的 边 距 

@ 定 义 劝 为 contentl 的 布局 块 的 样式 。 在 “CSS 设计 器 ”面板 中 单 击 “ 添 加 选择 器 ”按钮 ， 输入 
选择 器 名 称 #content1; 在 属性 窗 格 项 间 “布局 ”按钮 园 ， 拖 动 滚动 条 找到 margin 属性 。 单 击 “ 
以 更 改 特定 属性 ”按钮 图 ， 人 然后 设置 下 边 距 为 10px， 如 图 8-29 所 示 ; 在 属性 窗 格 顶部 单 击 “ 更 多 ” 接 
图 ,在 出 现 的 空 行 中 输入 属性 名 称 cursor， 值 为 text， 如 图 8-30 所 示 。 


里 击 
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图 8-28 插入 其 他 Div 


计 器 


+ ~ 源 : <style> 
+ @ 媒 体 : : 全 局 
+ 一 选择 器 :| #content1 


一 源 : <style> 
@ 媒 体 : : 全 局 
一 选 笃 器: #content1 
~- 展 性 
居 国 昌国 名 
加 更 


Cursor 


padding 


图 8-29 设置 下 廊 距 属性 图 8-30 自 定 又 属性 


@) 同样 的 方法 定义 其 他 三 个 规则 #content2，#content3 和 #content4， 设 置 下 边 距 均 为 10px， 然 后 自 
定义 属性 cursor， 值 分 别 为 wait、point 和 help， 如 图 8-31 所 示 
切换 到 “代码 ”视图 ， 可 以 看 到 对 应 的 CSS 代码 如 下 : 


#contentl1 { 
cursor: text; 
margin-bottom: 10px; 
} 
#content2 { 
cursor: wait} 
margin-bottom: 10px; 
} 
#content3 { 


cursor: point; 
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margin-bottom: 10px; 
} 
#content4 { 
cursor: help; 
margin-bottom: 10px} 


CSS 设计 器 CSS 设计 舌 Css 设计 器 


部 


一 源 : <styie> 
@ 媒 体 : : 全 局 
一 迹 反 加 :| #content3 


+ ~ 源 : <stye> 

+ 如 体 :: 全 局 

+ 一 选择 器: #content2 
4 属性 

虽 口 


+ - 源 : <styie> 
+ “ee 所 仁 :: 全 局 

+ 一 选 和 :|#content4 
+ 一 属性 

员 口 


园 机 
图 布局 


margin 


图 8-31 设置 下 廊 距 和 自 定义 属性 


(8) 执行 “文件 ”|“ 保 存 ” 命 令 , 保存 文档 , 然后 按 F12 键 预览 网 页 。 当 把 鼠标 指针 移动 到 文字 
本 ”上 时 ,鼠标 指针 变 成 I; 把 鼠标 指针 移动 到 上 时 ,鼠标 指针 变 成 O; 把 鼠标 指针 移动 到 文字 “ 提 
针 ” 上 时 ， 鼠 标 指针 变 成 尺 ; 把 鼠标 指针 移动 到 文字 “求助 ”上 时 ， 鼠 标 指针 变 成 ss; 

需要 注意 的 是 ， 有 些 CSS 样式 只 有 在 预览 时 才能 看 到 显示 效果 ， 例 如 本 例 中 的 CSS 样式 ， 


文 
i 
可 


8.3 编辑 和 使 用 CSS 规则 


利用 “CSS 设计 器 ”面板 ， 可 以 跟踪 影响 当前 所 选 页 面 元 素 
的 CSS 规则 和 属性 ， 或 影响 整个 文档 的 规则 和 属性 ， 还 可 以 在 不 
打开 外 部 样式 表 的 情况 下 “可 视 化 ”地 修改 CSS 样式 和 规则 ， 并 
设置 属性 和 媒体 查询 。 修 改 样式 表 后 ， 所 有 利用 该 样式 表 的 网 页 
都 将 自动 更 新 ， 应 用 新 样式 
8.3.1 修改 CSS 规则 

修改 CSS 规则 常用 的 方法 有 两 种 。 

1. 在 “CSS 设计 器 ”面板 中 修改 

在 “CSS 设计 器 ”面板 的 “ 源 ” 窗 格 中 单 击 选 中 需要 编辑 
的 CSS 样式 表 ， 接 下 来 在 选择 器 列表 中 选择 要 修改 的 选择 器 ， 


然后 在 对 应 的 属性 面板 中 单 击 属性 值 , 即 可 进行 修改 ,如 图 8-32 
所 示 。 


图 8-32 在 “CSS 设计 器 ”面板 中 编辑 属性 
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昌 几 提示 : 为 便于 集中 查看 已 定义 的 属性 值 ， 可 以 选中 “属性 ” 窗 格 中 的 “显示 集 ” 复 选 框 。 


站 教 你 一 招 : 使 用 CtrltZ 组 合 键 可 以 撤销 在 “CSS 设计 器 ”面板 中 执行 的 所 有 操作 ; 使 用 
CtrltY 组 合 键 可 以 还 原 在 “CSS 设计 器 "面板 中 执行 的 所 有 操作 。 所 做 更 改 会 自动 反映 在 “实时 视图 ” 


中 ， 且 相关 CSS 文件 也 会 自动 刷新 。 为 了 让 用 户 觉察 到 相关 文件 已 更 改 ， 受 影响 属性 的 选项 卡 将 突 
出 显示 几 秒 。 


2. 在 “CSS 规则 定义 ”对 话 框 中 修改 


在 页 面 上 选中 一 个 应 用 了 CSS 规则 的 页 面 元 素 ， 在 “属性 ”面板 上 的 CSS 属性 中 可 以 看 到 应 用 的 规 
则 名 称 ， 以 及 已 经 定义 的 属性 ， 如 图 8-33 所 示 。 


图 8-33 “属性 ”面板 上 的 CSS 属性 
单 击 “编辑 规则 ”按钮 ， 即 可 弹出 指定 规则 对 应 的 规则 定义 对 话 框 ， 如 图 8-34 所 示 。 在 选 定 的 属性 
值 上 单 击 鼠 标 ， 即 可 修改 属性 


8.3.2 ”删除 CSS 样式 表 


删除 CSS 样式 表 的 常用 方法 有 两 种 。 打 开 “CSSs 设计 器 "面板 ,在 “ 源 " 窗 格 中 选择 需要 删除 的 样式 表 ， 
执行 以 下 操作 之 一 。 


(1) 单 击 “ 源 ” 窗 格 顶 部 的 “删除 CSSs 源 ” 按 钮 攻 ， 如 图 8-35 所 示 ， 即 可 将 选中 的 CSS 样式 表 
| 除 。 


‘firstStyle 的 CSS 规则 定义 (在 newstylecss 中 ) 


B Cambria, Hoefler Ted, Liberation S 


“CSS 规则 定义 ”对 话 框 


中 删除 CSS 文件 
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(2 ) 直接 按键 盘 上 的 Delete 键 删除 。 
8.3.3 上 机 练习 一 一 使 用 外 部 样式 表 美 化 网 页 


> 练习 目标 


通过 前 面 基础 知识 的 讲解 ， 结 合 本 节 的 练习 实例 ， 使 读者 进一步 掌握 创 ”8-2 上 机 练 习 一 一 使 用 外 部 


建 CSs 规则 的 具体 操作 方法 ， 以 及 使 用 外 部 样式 表格 式 化 页 面 的 方法 样式 表 美 化 网 页 
设计 思路 


首先 新 建 一 个 样式 表 文 件 ， 创 建 CSS 规则 设置 链接 文本 样式 ， 并 保存 文件 。 然 后 打开 一 个 需要 应 
链接 样式 的 文件 ， 通 过 链接 外 部 样式 表 的 方式 使 用 样式 表 文 件 中 定义 的 样式 格式 化 文件 。 


户 罗 操作 步骤 


(1 ) 新 建 CSS 文件 。 启 动 Dreamweaver CC 2018 ,执行 “文件 ” |“ 新建 ”命令 ,在 弹出 的 “新 建文 档 ” 
对 话 框 中 设置 文档 类 型 为 CSS， 如 图 8-36 所 示 。 单 击 “创建 ”按钮 ， 新 建 一 个 样式 表 文 件 


EE Ed 


图 8-36 新 建 CSS 文件 


(2 ) 保存 样式 表 。 执 行 “文件 ” |“ 保存 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 输入 文件 名 称 style， 
保存 类 型 为 “Style Sheets"， 如 图 8-37 所 示 。 单 击 “保存 ”按钮 保存 文件 ， 并 关闭 对 话 杠 


EE 一 一 


OO «we » moon，dos Be E23 _p| 


WR” me =- @ 


”a [一 到 
ED 


Seexr* ee [es me | 


图 8-37 保存 CSS 文件 
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(3 ) 设置 链接 文本 属性 。 执 行 “ 窗 口 ”|“CSS 设计 器 ”命令 ， 打 开 “CSS 设计 器 ”面板 ， 在 “ 源 ” 
窗 格 中 选择 上 一 步 保存 的 样式 表 文 件 style.css。 单 击 “ 添 加 选择 器 ”按钮 ， 在 出 现 的 空 行 中 输入 选择 器 名 
称 a:link。 单 击 “ 属 性 ” 窗 格 项 部 的 “文本 ”按钮 ， 在 文本 属性 列表 中 设置 颜色 为 #0D8817， 字 体 加 粗 ， 
居中 对 齐 ， 且 无 修饰 ， 如 图 8-38 所 示 
(4) 设置 鼠标 指针 经 过 时 的 链接 样式 。 打 开 “CSS 设计 器 ”面板 ， 单 击 “ 添 加 选择 器 ”按钮 ， 在 出 
现 的 空 行 中 输入 选择 器 名 称 a:hover。 单 击 “ 属 性 ” 窗 格 项 部 的 “文本 ”按钮 ， 在 文本 属性 列表 中 设置 颜 
色 为 扯 F3300， 字 体 加 粗 ， 字 号 为 large， 居 中 对 齐 ， 且 无 修饰 ， 如 图 8-39 所 示 

(5 ) 保存 文件 。 执 行 “文件 ” |“ 保存 ”命令 ， 保 存 样式 表 文 件 style.css。 样 式 表 中 自动 生成 相应 的 
CSS 代码 ， 如 图 8-40 所 示 


CSS 设计 器 


+ 源 : stylecss 
所 有 源 
stylecss 


+ 
+ 
¥ 


3 CVinetpub\wwwroot\tg\chOs\style css* 
echarset "utf-8"; 


+ “， @ 捍 体 :: 全 局 
xm + 

国 口 
个 文 
color 
foat-weig 邮 


font-size 


text-alon 
text-decoration : 回 工 下 王 


+ -选择 器: alink 


astink { 
axlink color: 
+ 属性 
国 日 

回 

color 
font-weight 


text-align 
text-decoration 


图 8-38 设置 alink 的 CSS 属性 图 8-39 设置 ahover 的 CSS 属性 图 8-40 样式 表 文 件 中 的 CSS 代码 

(6) 打开 文件 并 添加 链接 。 执 行 “ 文 件 " | “打开 ”命令 ， 打 开 一 个 需要 应 用 链接 样式 的 网 页 文件 ， 
如 图 8-41 所 示 。 选 中 需要 添加 链接 的 文本 “ 林 清 玄 "， 在 属性 面板 上 的 “链接 ”文本 框 中 输入 “#” 号 。 
此 时 链接 文本 显示 为 蓝 色 ， 且 有 下 夯 线 ,效果 如 图 8-42 所 示 


植 村 人 名 是 陪 几 夫 才 厅 吉水 


有 几 军 衬 桂 莹 了 钢 ? 他 沉 
天 下 两 ， 才 天 下 璀 时 算 
三 确定 中 找到 水 源 ， 


图 8-41 要 应 用 链接 样式 的 原始 文件 
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图 8-42 ”链接 文本 显示 效果 


(7 ) 链接 外 部 样式 表 。 打 开 “CSS 设计 器 ”面板 ， 单 击 “ 添 加 CSS 源 ” 按 钮 ， 在 弹出 的 下 拉 列 表 中 
选择 “附加 现 有 的 CSS 文件 ”命令 ， 如 图 8-43 所 示 

在 弹出 的 “使 用 现 有 的 CSS 文件 ”对 话 框 中 ， 单 击 “ 浏 览 ” 按 钮 ， 在 弹出 的 对 话 框 中 选择 保存 的 样 
式 表 文 件 style.css， 添 加 方式 为 “链接 ”， 如 图 8-44 所 示 


使 用 现 有 的 CSS 文件 [| 


证 上 


) SA 


有 条 件 使 用 《可 选 ) 


图 8-43 选择 添加 CSS 源 的 方式 图 8-44 “使 用 现 有 的 CSS 文件 ”对 话 框 


(8 ) 单 击 “ 确 定 ”按钮 ， 即 可 应 用 样式 表 中 的 链接 文本 样式 。 如 图 8-45 所 示 , 链接 文本 显示 为 绿色 ， 
且 无 下 画 线 ; 将 鼠标 指针 移 到 链接 文本 上 时 ， 字 体 变 大 ， 且 颜色 变 为 橙色 


EB EH - Wiraows Intemet Explorer rE Ri Vindows imernet txplorer 
OO eno -sD ro | OO Borat -To lx [or 
Y 相 志 夫 | 匡 天 时 村 全 ”~ 国 = 己 “| 六 大。 硬 天 5Ex 村 全 ~- 国 - 口 
my EE wal - 
返回 首页 J 文集 生活 随笔 返回 首页 JJ 文集 生活 随笔 “ 
桃花 心 森 | 桃花 心 木 
作者 ,[( 林 请 妇 
多 下 老家 前 面 的 空地 ， 租 给 信守 科 桃花 心 本 的 树苗 。 -| 多 下 老家 前 看 的 宝地 ， 租 给 人 家 种 帐 花 心 本 的 树苗 。 ~ 
FE 全 -ioo% - FP 和 00% ~ 


图 8-45 ”应 用 链接 样式 后 前 效果 


8.4 认识 CSS 布局 块 


CSS 布局 与 传统 表格 ( table ) 布局 最 大 的 区 别 在 于 : 传统 表格 布局 采用 表格 定位 ， 通 过 表格 的 间距 
或 者 用 无 色 透 明 的 GIF 图 片 控 制 布局 版 块 的 间距 ; 用 CSS 布局 则 主要 用 块 元 素 ( 如 Div ) 来 定位 ， 通 过 
指定 块 元 素 的 margin、padding、border 等 属性 控制 版 块 的 间距 ， 通 过 ID 选择 器 定义 块 元 素 的 样式 。 
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8.4.1 CSS 念 模 型 简介 


早 在 1996 年 推出 CSS1 时 ，W3C 组 织 \ 就 建议 把 所 有 网 页 上 的 对 象 都 放 在 一 “ 盒 ” 中 ， 通 过 创建 
margin ”规则 控制 “ 盒 ” 的 属性 。CSS 盒 模型 是 Web 入 市 局 的 术 心 所 在 ， 
toder ”在 详细 介绍 Div+CSS 布局 之 前 ， 读 者 很 有 必要 先 了 解 CSS 盒 模 
型 的 概念 和 组 成 。 

所 谓 CSS 盒 模型 ， 是 指 通过 由 CSS 定义 的 大 小 不 一 的 盒子 

和 盒子 戏 套 排版 网 页 。 采 用 这 种 编排 方式 的 网 页 代码 简洁 ， 表 现 
和 内 容 分 离 ， 后 期 维护 方便 ， 能 兼容 更 多 的 浏览 器 。 

CSS 盒 模型 的 示意 图 ， 如 图 8-46 所 示 。 

由 图 8-46 可 以 看 出 ， 整 个 盒 模型 在 页 面 中 所 占 的 宽度 = 左边 
comtent ” 距 + 左 边框 + 左 填 充 + 内 容 宽度 + 右 填 充 + 右 边框 + 右边 距 ; 高 
图 8-46 CSS 盒 模 型 示意 图 度 = 上 边 距 + 上 边框 + 上 填充 + 内 容 高 度 + 下 填充 + 下 边框 + 下 

边 距 


padding 


嫩 注 意 : 在 CSS 样式 中 width ( height ) 属性 定义 的 宽度 (高度 ) 仅 指 内 容 部 分 的 宽度 ( 高 度 )， 
而 不 是 盒 模型 的 宽度 ( 高 度 )。 


ws 者 在 学 习 CSS+Div 布局 方式 时 ， 常 会 误 认 为 只 能 使 用 Div 标签 进行 布局 ， 从 而 导致 Div 标签 的 
小 用。 -,，“ 盒 子 ” 还 可 以 是 标题 、 段 落 等 块 级 元 素 。 下 面 是 几 个 在 Dreamweaver CC 2018 中 经 常 使 
用 的 “盒子 ”示例 : 

和 Div 标签 ， 

和 指定 了 绝对 或 相对 位 置 的 图 像 。 

和 指定 了 display:block 样式 的 a 标签 

和 指定 了 绝对 或 相对 位 置 的 段落 . 

盒 模型 主要 定义 四 个 区 域 : 内 容 ( content )、 填 充 ( padding )、 边 框 (border ) 和 边 距 ( margin )。 此 外 ， 
还 可 以 指定 盒 模型 的 定位 (position ) 和 浮动 (float ) 等 属性 ， 创 建 灵活 多 变 的 排版 效果 。 下 面 分 别 进行 
简要 介绍 。 

1. 内 容 

内 容 区 域 可 以 放置 任何 网 页 元 素 ， 这 一 区 域 的 属性 主要 在 “CSS 设计 器 ”面板 的 “文本 ”和 “背景 ” 
属性 列表 中 进行 设置 。 例 如 : font-family、 font-style、 font-size .color background-image、 line-height 属性 等 。 

2. 填充 (padding ) 

padding 属性 用 于 描述 盒 模型 的 内 容 与 边框 之 间 的 距离 ， 分 为 padding-top 、padding-right、padding- 
bottom 和 padding-left 四 个 属性 ， 分 别 表 示 盒 模型 四 个 方向 的 内 边 距 ， 它 的 
属性 值 是 数值 ， 单 位 可 以 是 长 度 、 百 分 比 或 anto。 例 如 : 

#container {padding-left:20px; } 

#footer { padding-top: 10% } 

如 果 同 时 指定 盒 模型 四 个 方向 的 内 边 距 ， 可 以 直接 用 padding 属性 ， 
四 个 值 之 间 用 空格 隔 开 ， 顺 序 是 : 上 、 右 、 下 、 左 ， 如: 


body { padding: 5px 10px 5px 5px} 


在 “CSS 设计 器 ”面板 中 的 显示 效果 ， 如 图 8-47 所 示 。 图 8-47 设置 padding 属性 
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和 站/ 教 你 一 招 : padding 属性 的 简写 方式 
根据 需要 ，padding 属性 的 值 也 可 以 不 足 四 个 。 例如: 
#side {padding: 2px } /* 所 有 的 内 边 距 都 设 为 2px*/ 
#side {padding: lpx 5px } /* 上 、 下 内 边 距 为 1px， 左 、 右 内 边 距 为 5px*/ 
#side { padding: 0px 2px 3px } /* 上 内 边 距 为 0， 左 、 右 内 边 距 为 2px， 下 内 边 距 为 3px*/ 


3. 边框 (border ) 

border 属性 用 于 描述 盒 模 型 的 边框 。border 属性 包括 border-width 、border-color 和 border-style， 这 些 
属性 下 面 又 有 分 支 。 

border-width 属性 用 于 设置 边框 宽度 ， 分 为 bordertop-width 、border-right-width 、border-bottom- 
width .border-left-width 和 border-width 属性 。 与 padding 属性 类 似 ,border-width 为 简写 方式 ,顺序 为 上 、 右 、 
下 、 左 ， 值 之 间 用 空格 隔 开 。 例 如 : 


img { 
border-width: 0px}; 


border-style 属性 用 于 设置 对 象 边 框 的 样式 ， 初 始 值 为 none， 即 不 显示 边框 。 

border-color 属性 用 于 显示 边框 颜色 ， 分 为 border-top-color、border-right-color 、border-bottom-color、 
border-right-color 和 border-color 属性 ， 属 性 值 为 颜色 ， 可 以 用 十 六 进 制 表示 ， 也 可 用 RGBO 表示 ， 
border-color 为 快捷 方式 ， 顺 序 为 上 、 右 、 下 、 左 ， 值 之 间 用 空格 隔 开 。 例 如 : 


img { 
border-color: #EC7B37; 


} 
如 果 要 同时 设置 边框 的 以 上 三 种 属性 ， 可 以 使 用 简写 方式 border, 属性 值 间 用 空格 阳 开 ,顺序 为 “ 边 
框 宽度 边框 样式 边框 颜色 ”， 例 如 : 


#layout { 
border: S5px dashed #FF3300} 
} 


在 “CSS 设计 器 ”面板 中 的 显示 效果 如 图 8-48 所 示 ， 应 用 该 规则 的 块 元 素 在 “设计 ”视图 中 的 效果 
如 图 8-49 所 示 。 


图 8-48 设置 border 属性 图 8-49 设置 border 属性 的 块 元 素 


还 可 以 用 border-top 、border-right、border-bottom 、border-left 分 别 作为 上 、 右 、 下 、 左 边框 的 快捷 方 
式 ， 属 性 值 顺序 与 border 属性 相同 。 
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4. 边 距 ( margin ) 
margin 属性 分 为 margin-top、margin-right、margin-bottom、margin-left 和 margin 五 个 属性 ， 分 别 表 
示 盒 模型 四 个 方向 的 外 边 距 。 它 的 属性 值 可 以 是 长 度 、 百 分 比 或 aato， 甚 至 可 以 设 为 负 值 ， 实 现 容 器 与 


容器 之 间 的 重生 显示 。 


与 padding 属性 类 似 ， 可 以 直接 用 margin 属性 作为 简写 方式 ， 四 个 值 之 间 用 空格 隅 开 ， 顺序 是 “上 、 
右 、 下 、 左 ”例如 : 


} 


body { margin: 5px 8px 10px 2px} 


上 面 的 代码 等 同 于 : 


body { 


margin-top: 5px; 
margin-right:8px; 
margin-bottom: 10px; 
margin-left:2px; 


图 8-50 设置 margin 属性 


在 “CSS 设计 器 ”面板 中 的 显示 效果 如 图 8-50 所 示 。 
同样 ，margin 属性 的 值 也 可 以 不 足 四 个 ， 例 如 : 


#side { margin: 2px } /* 所 有 的 边 距 都 设 为 2px*/ 
#side { margin: lpx 5px } /* 上、 下 边 距 为 lpx， 左 、 右 边 距 为 5px*/ 
#side { margin: 0px 2px 3px } /* 上边 距 为 0， 左 、 右 边 距 为 2px， 下 边 距 为 3px*/ 


息 / 教 你 一 招 : 在 IE6 及 以 上 版 本 和 标准 的 浏览 器 中 ， 设 置 一 个 金 模型 的 外 边 距 属性 均 为 auto 


(margin:auto; ) 时 ， 可 以 使 爹 模 型 在 页 面 上 居中 。 


5. 布 局 (layout ) 


使 用 以 上 四 类 属性 可 以 指定 CSS 布局 块 的 显示 外 观 。 在 进行 页 面 布局 时 ， 还 需要 一 些 属性 对 布局 块 


进行 定位 ， 指 定 布局 块 在 页 面 中 的 呈现 方式 。 
(1 ) position 属性 
position 属性 用 于 指定 元 素 的 位 置 类 型 ， 各 个 属性 值 的 含义 如 下 : 


Si absolute: 绝对 定位 。 位 置 将 依据 浏览 器 左上 角 开 始 计算 。 绝 对 定位 使 元 素 可 以 覆盖 页 面 上 的 其 他 
元 素 ， 并 可 以 通过 z-index 属性 来 控制 它 的 层级 次 序 。 
3 relative: 相对 定位 ， 依 据 top，right，bottom，left 等 属性 ， 相 对 它 原来 的 位 置 偏 移 。 


角 


注意 : 父 容器 使 用 相对 定位 ， 子 元 素 使 用 绝对 定位 后 ， 子 元 素 的 位 置 不 再 相对 于 浏览 器 左上 
， 而 是 相对 于 父 窗口 左上 角 。 


能 使 


和 static: 无 特殊 定位 ， 是 HTML 元 素 默认 的 定位 方式 。 

NN fixed: 固定 的 。 对 象 定位 遵从 绝对 ( absolute ) 方式 ， 以 浏览 器 窗口 为 参考 点 进行 定位 ， 当 出 现 滚 
动 条 时 ， 不 会 随 滚动 条 的 滚动 而 进行 偏 移 。 

相对 定位 和 绝对 定位 需要 配合 top、right、bottom、left 来 定位 具体 位 置 。 此 外 ， 这 四 个 属性 同时 只 

相 邻 的 两 个 ， 不 能 使 用 top 又 使 用 bottom， 或 同时 使 用 right 和 1left。 使 用 示例 : 


#menu { position: absolute; left: 100px; top: Opx; } 
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#menu ul li {position:relative; right: 100px; bottom: Opx; } 
在 “CSS 设计 器 ”面板 中 的 显示 效果 如 图 8-51 所 示 。 


#meny 


+ -属性 
员 回 日 图 日 
position : | absolute 


图 8-51 设置 position 属性 


(2 ) float 和 clear 属性 

在 CSS 中， 任何 元 素 都 可 以 浮动 。 浮 动 元 素 会 生成 一 个 块 级 框 ， 而 不 论 它 本 身 是 何 种 元 素 。 设 置 元 
素 浮 动 后 应 指明 一 个 宽度 ， 和 否则 它 会 尽 可 能 地 窄 ; 当 可 供 浮动 的 空间 小 于 浮动 元 素 时 ， 它 会 跑 到 下 一 行 ， 
直到 拥有 足够 放下 它 的 空间 ， 

float 属性 有 三 个 值 left right、none, 用 于 指定 元 素 将 飘浮 在 其 他 元 素 的 左 或 右 方 , 或 不 浮动 。 例 如 : 


#side { height: 300px; width: 120px; float: left; } 


相反 地 , 使 用 clear 属性 将 禁止 元 素 上 飘浮。 其 属性 值 有 : left right、 both、 none, 初始 值 为 none。 例 如 : 


clearfloat {clear:both; font-size: lpx;line-height: 0px;} 


(3 ) overflow 属性 

在 指定 元 素 的 宽度 和 高 度 时 ， 如 果 元 素 的 宽度 或 高 度 不 足以 显示 全 部 内 容 ， 就 要 用 到 overflow 属性 。 
overflow 的 属性 值 含义 如 下 : 

和 visible: 增 大 宽度 或 高 度 ， 以 显示 所 有 内 容 。 

3 hidden: 隐藏 超出 范围 的 内 容 。 

3 scroll: 在 元 素 的 右边 显示 一 个 滚动 条 

和 auto: 当 内 容 超 出 元 素 宽度 或 高 度 时 ， 显 示 滚 动 条 ， 让 高 度 自 适应 。 

例如 : 


"nav main { height:36px; overflow:hidden;} 

(4) z-index 属性 

在 CSS 中 人 允许 元 素 重 每 显示 ,这 样 就 有 一 个 显示 顺序 的 问题 ,zindex 属性 用 于 描述 元 素 的 前 、 后 位 置 。 

z-index 使 用 整数 表示 元 素 的 前 、 后 位 置 ， 数 值 越 大 ， 就 会 显示 在 相对 越 靠 前 的 位 置 ， 适 用 于 使 用 
position 属性 的 元 素 。z-index 初始 值 为 anto， 可 以 使 用 负数 。 使 用 示例 : 


#divl {position:absolute; left:121px; top:441lpx; width:86px; height:24px; z-index:2;} 


8.4.2 ”创建 Div 标签 


Div 标签 常用 于 定义 网 页 内 容 的 显示 区 域 ， 通 常 被 称 为 “ 块 "。 使 用 Div 标签 可 以 将 内 容 块 居中 ， 创 
建 列 效果 以 及 创建 不 同 的 颜色 区 域 等 ， 还 可 以 对 Div 标签 应 用 CSS 样式 创建 页 面 布局 。 

在 “文档 ”窗口 的 “设计 ”视图 中 ,将 插入 点 放置 在 要 显示 Div 标签 的 位 置 。 执 行 “ 插 和 人 "| “Div ”命令 ， 
或 在 “插入 ”面板 的 “HTML” 类 别 中 单 击 “Div” 按 钮 图 ， 弹 出 如 图 8-52 所 示 的 “插入 Div” 对 话 框 : 
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革 现 枚 入 门 与 下 诗 


9 插入 : 用 于 选择 Div 标签 的 插入 位 置 ， 如 图 8-53 所 示 。 如 果 选 择 “ 在 插入 点 ”以 外 的 其 他 选项 ， 
则 还 要 选择 一 个 已 有 的 标签 名 称 。 


插入 Div [一 | 


图 8-53 选择 插入 位置 


图 8-52 “插入 Div” 对 话 框 


站 类; 指定 要 应 用 于 Div 标签 的 类 样式 。 如 果 附 加 了 样式 表 ， 则 该 样式 表 中 定义 的 所 有 类 都 将 显示 
在 “类 ”下 拉 列 表 中 。 

3 ZD: 指定 用 于 标识 Div 标签 的 唯一 名 称 。 如 果 附 加 了 样式 表 ， 则 该 样式 表 中 定义 的 所 有 ID ( 除 当 
前 文档 中 已 有 的 块 的 ID ) 都 将 出 现在 列表 中 。 

YN 新 建 CSS 规则 : 单 击 该 按钮 打开 如 图 8-54 所 示 的 “新 建 CSS 规则 ”对 话 框 


选择 加 类 型 : 
为 Css 规 IMW 千 择 上 下 文选 择 器 类 型 。 
[ 实 (可 应 用 于 任何 JGML 元 素 ) 


选择 器 名 称 : 
选择 或 输入 选择 器 名 称 。 


. 


不 太 有 具体 更 具体 


[人 限 该 文档 ) 下 


图 8-54 “新 建 CSS 规则 ”对 话 框 


单 击 “ 插 入 Div” 对 话 框 中 的 “确定 ”按钮 关闭 对 话 框 , 即 可 在 文档 中 插入 一 个 Div 标签 。 在 “设计 ” 
视图 中 ，Div 标签 默认 以 虚线 框 的 形式 出 现 ， 并 显示 占 位 文本 ， 如 图 8-55 (a ) 所 示 。 将 鼠标 指针 移 到 虚 
线 框 的 边缘 上 时 ， 虚 线 框 高 亮 显 示 ， 如 图 8-55 (b ) 所 示 


此 处 显示 记 "frst 的 内 容 


图 8-55 创建 Div 标签 
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晶 几 提示 : 如 果 不 希望 在 页 面 上 显示 CSS 布局 块 的 虚线 外 框 ， 可 以 执行 “查看 ”|“ 设 计 视 图 先 
项 ”|“ 可 视 化 助理 ”|“CSS 布局 外 框 ”菜单 命令 取消 显示 布局 外 框 ， 如 图 8-56 所 示 。 


RBO 

拆 分 (S) A 

喜 丰 楼 M) ’ 

切 拉 杭 图 WV) tate” 

f(D) 

粒 查 (1) Ah+Shift+F11 

设计 视图 (E) 5 

" [km | 

相关 文件 (R) » 样式 呈现 (S) » 

相关 文件 运 项 (0) » 辅助 绑 (U) » 
NEEM) 
二 ) 
音 吕 大 小 四 了 
缩放 比 诗 (P) | 
奈 RIR) ， 


图 8-56 ”取消 显示 CSS 布局 外 框 


8.4.3 ”编辑 Div 标签 


插入 Div 标签 之 后 ， 就 可 以 在 “CSS 设计 器 ”面板 中 查看 和 编辑 应 用 于 Div 标签 的 规则 ， 或 在 标签 
中 添加 内 容 了 。 

1. 选 中 Div 标签 

编辑 Div 标签 之 前 ， 首 先 要 选中 Div 标签 ， 常 用 的 方法 有 以 下 几 种 。 

站 单 击 Div 标签 的 边框 。 选 中 后 的 Div 标签 显示 蓝 色 的 粗 线 框 ， 如 图 8-57 所 示 。 

9 在 Div 标签 内 单 击 ， 然 后 按 两 次 Ctl+A ( Windows ) 或 Command+A ( Macintosh )。 

9 在 Div 标签 内 单 击 ， 然 后 在 “文档 ”窗口 底部 的 标签 选择 器 中 单 击 Div 标签 ID ， 如 图 8-58 所 示 。 


ek 


可 ; 


图 8-57 单 击 廊 框 选中 Div 标签 图 8-58 ”使 用 标签 选择 器 选中 Div 标签 


2. 在 Div 标签 中 添加 内 容 
选中 Div 标签 中 的 占 位 文本 ， 然 后 输入 内 容 ; 或 按 Delete 键 删除 占 位 文本 ， 然 后 以 在 页 面 中 添加 内 
容 的 方式 添加 内 容 ， 如 图 8-59 所 示 。 


图 8-59 在 Div 标签 中 添加 内 容 
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3. 查看 、 定 义 规则 

执行 “窗口 ”|“CSS 设计 器 ”命令 ,打开 “CSS 设计 器 ”面板 ,当前 Div 标签 已 应 用 的 规则 显示 在 “ 选 
择 器 ” 窗 格 中 。 如 果 没 有 为 当前 选中 的 Div 标签 定义 CSS 规则 ， 则 显示 为 室 。 例 如 ， 定 义 如 图 8-59 所 示 
的 Div 标签 了 D 为 main， 宽 350px， 高 150 px， 文 本 颜色 为 橙色 ， 边 框 为 1px 深 灰 色 实 线 ， 且 在 页 面 上 居 
中 ， 可 以 定义 如 图 8-60 所 示 的 CSS 规则 ， 对 应 的 CSS 代码 如 下 : 


#main { 
width: 350px; 
height: 150px; 
border: 1px solid #666666; 
margin: auto; 
color: #FF6600; 
} 


显示 效果 如 图 8-61 所 示 


: 图 :reo 


:1px solid #666666 


mp 全 
> 1 
ah | 
图 8-60 设置 CSS 属性 图 8-61 CSS 布局 块 效果 


(以 知识 拓展 
可 视 化 CSS 布局 块 
启用 可 视 化 CSS 布局 块 ,可 以 很 直观 地 查看 布局 块 的 填充 和 边 距 。 执 行 “查看 ”|“ 设 计 视 图 选项 ”|“ 可 
视 化 助理 ”命令 ， 可 以 在 弹出 的 子 菜单 中 设置 是 否 显示 CSS 布局 背景 、 框 模型 和 布局 外 框 ， 如 图 8-62 所 示 。 


和 CSS 布局 背景 : 选中 该 选项 ， 可 以 显示 各 个 CSS 布局 块 的 临时 指定 背景 颜色 ， 并 隐藏 通常 出 现在 
页 面 上 的 其 他 所 有 背景 颜色 或 图 像 ， 如 图 8-63 所 示 


至 注意 : 每 次 启用 “可 视 化 助理 ”查看 CSS 布局 块 背 景 时 ，Dreamweaver CC 2018 使 用 一 个 算 
法 自动 为 每 个 CSS 布局 块 分 配 一 种 背景 颜色 。 用 户 无 法 自行 指定 布局 背景 颜色 。 
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fm 

拆 分 (S) 

坦 看 模式 (M) ， 

切换 视图 (V) Chi+Alt+ 

syK 玛 (D) 

检查 四 Alt+ Shift+F11 

有 设计 视图 (E) 捷 

中 区 Ra ] | eam Ca+shifftl 

相关 文件 (R) | ER) ,| css Ree) 

相关 文件 远 项 (0) » 辅助 线 (U) *| YCss 布局 框 模型 (M) 
轩 入 加 你 (M) 。。 ， 上 VCss 布局 外 杠 (O) 
网 格 设置 (G) "| V | BW) 
RD | Y SHE 
过 故 比 训 ( 加 | 

Y 不 可 见 元 素 (N) 

标 R(R) » 


图 8-62 设置 CSS 属性 图 8-63 显示 CSS 布局 背 央 


和 CSS 布局 框 模型 : 显示 所 选 CSS 布局 块 的 框 模型 ( 即 填充 和 边 距 ), 如 图 8-64 所 示 。 设 置 如 图 8-63 
所 示 的 ID 为 head 的 布局 块 上 、 下 、 左 、 右 填充 10px， 上 、 下 边 距 为 10px， 左 、 右 边 距 为 5px 
的 效果 

和 CSS 布局 外 框 : 显示 页 面 上 所 有 CSS 布局 块 的 虚线 外 框 。 取 消 显 示 CSS 布局 外 框 后 的 效果 如 
图 8-65 所 示 。 


此 处 显示 id "head" 的 内 容 


此 处 显示 记 "content" 的 内 容 
此 处 显示 这 "foot 的 内 容 


图 8-64 显示 CSS 布局 框 模型 


8.4.4 上 机 练习 一 一 制作 简易 公告 栏 


二 生日 标 


本 练习 实例 制作 一 个 简易 的 公告 栏 。 通过 8.4.1 节 ~8.4.3 节 基 础 知识 的 讲解 ， 8-3 上 机 练习 一 一 制作 
结合 本 节 的 练习 实例 ， 使 读者 掌握 幅 套 布局 块 的 创建 ， 以 及 通过 CSS 属性 美化 简易 公告 栏 
布局 块 外 观 的 操作 方法 。 


和 设计 思路 

首先 新 建 一 个 空白 的 网 页 文件 ， 在 页 面 中 插入 一 个 Div 标签 ， 定义 CSS 规则 指定 布局 块 的 尺寸 和 背 
景 图 像 。 接 下 来 在 布局 块 中 骨 套 一 个 Div 标签 ， 通 过 定义 CSS 属性 设置 布局 块 的 位 置 、 边 框 样式 、 背 景 
颜色 和 文本 样式 。 最 后 在 布局 块 中 输入 文本 ， 并 使 用 <marquee> 标签 使 文本 在 指定 区 域 滚动 显示 ， 最 终 
效果 如 图 8-66 所 示 
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AN 查 高 


AN 
图 8-66 “属性 ”面板 上 的 CSS 属性 效果 


户 罗 操作 步骤 

1. 新 建文 件 

启动 Dreamweaver CC 2018， 执 行 “文件 ” |“ 新建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 选择 文 
档 类 型 为 HTML,， 无 框架 , 单 击 “创建 ”按钮 关闭 对 话 框 ,创建 一 个 空白 的 HTML 文件 

2. 插 入 Div 

在 页 面 上 单 击 插入 鼠标 指针 ， 执 行 “插入 ”|“Div” 命 令 ， 在 弹出 的 “插入 Div” 对 话 框 中 输入 ID 
为 main， 如 图 8-67 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 

3. 使 用 CSS 规则 设置 布局 块 外 观 

(1 ) 添加 源 。 执 行 “ 窗 口 "|“CSSs 设计 器 ”命令 ,打开 “CSS 设计 器 ”面板 。 单 击 “ 添 加 CSS 源 ” 按钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 “在 页 面 中 定义 ”命令 ， 如 图 8-68 所 示 。 

(2 ) 添加 选择 器 。 单 击 “ 添 加 选择 器 ”按钮 ， 在 出 现 的 空 行 中 输入 #main， 然 后 按 Enter 键 ， 或 单 击 
其 他 空白 区 域 。 

(3 ) 设置 属性 。 在 “布局 ”属性 区 域 ， 设 置 宽 ( width ) 为 1024px， 高 (height ) 为 768px， 左 、 右 
边 距 为 auto; 切换 到 “背景 ”属性 ， 设 置 背景 图 像 ， 且 图 像 不 重复 ， 如 图 8-69 所 示 。 


图 8-67 “插入 Div” 对 话 框 


图 8-68 ”设置 添加 源 的 方式 图 8-69 设置 布局 块 main 的 属性 
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此 时 ， 页 面 中 的 布局 块 效果 如 图 8-70 所 示 。 

4. 谋 套 布局 块 

该 布局 块 用 于 显示 公告 内 容 。 

删除 有 局 块 main 的 占 位 文本 ,执行 “ 插 入 ”|“Div” 命 令 ， 在 弹出 的 “插入 Div” 对 话 框 中 输入 ID 
为 content， 如 图 8-71 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 


NST 
图 8-70 设置 了 CSS 属性 的 布局 块 效果 图 8-71 “插入 Div” 对 话 框 


5. 定义 布局 块 的 布局 

(1) 指定 CSS 源 。 执 行 “ 窗 口 ”|“CSS 设计 器 ”命令 ,打开 “CSS 设计 器 ”面板 。 在 源 列表 中 选择 
<style>， 如 图 8-72 所 示 ， 即 在 页 面 中 定义 CSS 规则 

(2 ) 添加 选择 器 。 单 击 “ 添 加 选择 器 ”按钮 ， 在 出 现 的 空 行 中 输入 #content， 然 后 按 Enter 键 ， 或 单 
击 其 他 空白 区 域 。 

(3 ) 设置 属性 。 在 “布局 ”属性 区 域 ， 设置 宽 (width ) 为 400px， 高 ( height ) 为 260px， 左 边 距 
为 50px; 在 padding 属性 区 域 ， 单 击 “ 单 击 以 更 改 所 有 属性 ”按钮 图 ， 然 后 输入 20px， 即 设置 内 边 距 为 
20px; 在 position 属性 下 拉 列 表 中 选择 absolute，top 值 为 300px， 如 图 8-73 所 示 


+ 一 源 : <styie> 


所 有 源 
<style> 
+ @ 扣 体 : 
+ ” 远 笑 只 


图 8-72 指定 CSS 源 图 8-73 设置 布局 属性 
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此 时 的 布局 块 效果 如 图 8-74 所 示 


LU 
图 8-74 ”设置 布局 属性 的 布局 块 效果 


6. 定义 布局 块 的 边框 样式 


切换 到 “边框 ”属性 ,设置 边框 宽度 ( width ) 为 1px, 样 式 (style ) 为 solid; 在 边 角 半 径 ( border-radius ) 


区 域 单 击 “ 单 击 以 更 改 所 有 属性 ”按钮 图 ， 然 后 
所 示 。 
切换 到 “实时 视图 "， 可 以 查看 边框 的 效果 ， 如 图 8-76 所 示 


NS 
图 8-76 ” 亡 框 效果 


图 8-75 设置 廊 框 样式 


7. 定义 文本 样式 和 背景 颜色 


输入 10px， 即 设置 边框 为 圆 角 ， 半 径 为 10px， 如 图 8-75 


切换 到 “文本 ”属性 ， 设 置 行距 (line-height ) 为 150%; 切换 到 “背景 ”属性 ， 设 置 背景 颜色 
( background-color ) 为 狂 FFFCC。 切 换 到 “实时 视图 ”， 布 局 块 的 预览 效果 ， 如 图 8-77 所 示 ， 


8. 添加 文本 
除 布局 块 content 中 的 占 位 文本 ， 输 入 需要 显示 的 公告 内 容 ， 如 图 8-78 所 示 。 
9. 创建 滚动 文本 

要 实现 滚动 文本 ， 可 以 使 用 
标签 中 设置 相关 的 属性 ， 以 更 好 地 控制 滚动 文本 。 


人 


<marquee> 标签 将 需要 实现 滚动 的 文本 内 容 包 含 起 来 ， 并 在 <marquee> 
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.i 人 
图 8-77 设置 了 背 央 颜色 和 文本 样式 的 布局 块 效果 图 8-78 输入 分 告 内 容 
(1 ) 插入 定位 点 。 在 “设计 ”视图 中 将 指针 定位 在 需要 添加 滚动 文本 的 位 置 , 单 击 “文档 ”工具 栏 上 


的 “ 拆 分 ”按钮 ， 转 换 到 “代码 ”视图 中 ， 在 鼠标 指针 所 在 位 置 单 击 ， 如 图 8-79 所 示 的 位 置 

(2 ) 添加 滚动 代码 。 在 鼠标 指针 所 在 位 置 输入 <marquee behavior="scroll" direction="up" hspace="0" 
height="220" vspace="20" loop="-1" scrollamount="1" scrolldelay="60">， 然 后 在 文本 结尾 处 添 
如 图 8-80 所 示 


加 </marquee>， 


图 8-79 ”插入 定位 点 图 8-80 添加 滚动 代码 


此 时 切换 到 “实时 视图 "， 可 以 预览 文本 的 滚动 效果 ， 如 图 8-81 所 示 

(3 ) 动 。 为 了 使 浏览 者 能 够 清楚 地 看 到 滚动 的 文字 ， 还 需要 实现 当 鼠 标 指针 移动 到 滚动 字幕 
上 时 ， 字幕 滚 动 停止 ; 当 鼠 标 指针 移 开 时 ， 字 幕 滚动 继续 的 效果 

在 <marquee> 标记 中 添加 属性 onmouseover 和 onmouseout， 修 改 后 的 代码 如 下 : <marquee 
behavior="scroll" direction="up" hspace="0" height="220" vspace="20" loop="-1" scrollamount="1" 
this.start0"> ， 如 图 8-82 所 示 。 


scrolldelay="60" onmouseover="this.stop()" onmouseout= 


10. 保存 文件 
执行 “文件 ”|“ 保 存 ” 命 令 ， 保 存 页 面 。 在 浏览 器 中 的 预览 效果 如 图 8-66 所 示 。 
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天 柬 误 


遇 遇 了 遇 昌 遇 
3 


芒 理 晶 惠 攻 


图 8-81 ”滚动 效果 图 8-82 添加 控制 代码 


(以 知识 拓展 
<marquee> 标签 的 属性 

<marquee> … </marquee> 标签 用 于 在 页 面 中 设置 滚动 字幕 。 常 用 的 属性 如 下 。 

direction: 用 于 设置 滚动 方向 ， 属 性 值 up 表示 向 上 滚动 ，down 表示 向 下 滚动 ，left 表示 向 左 滚动 ， 
right 表示 向 右 滚动 ， 默 认为 left。 

behavior: 用 于 设置 滚动 的 方式 ， 值 可 以 是 scroll ( 连续 滚动 )、slide ( 滑动 一 次 )、alternate (来 
回 滚动 )。 

loop: 用 于 设置 滚动 的 循环 次 数 ， 属 性 值 为 正 整 数 ， 若 未 指定 则 无 限 循环 。 

scrollamount: 用 于 设置 滚动 的 速度 ， 属 性 值 为 整数 ， 数 值 越 小 滚动 越 慢 。 

scrolldelay: 用 于 设置 滚动 的 停顿 时 间 ， 属 性 值 为 整数 ， 数 值 越 大 速度 越 慢 ， 默 认为 0。 

Height 和 Width: 用 于 设置 滚动 区 域 的 高 度 和 宽度 ， 属 性 值 为 正 整数 或 百分数 。 

onMouseOver: 指定 当 鼠 标 指针 移动 到 滚动 区 域 时 执行 的 操作 。 例 如 ，onmouseover= "this. 
stop()” 表 示 当 鼠标 指针 移 到 滚动 区 域 时 ， 停 止 滚动 。 

onMouseOut; 指定 当 鼠 标 指 针 移 开 区 域 时 执行 的 操作 。 例 如 ，onmouseout='"this.start()" 表示 当 
鼠标 指针 移 开 滚动 区 域 时 ， 继 续 滚动 。 

hspace 和 vspace: 用 于 指定 元 素 到 滚动 区 域 边界 的 水 平 距离 和 垂直 距离 。 

此 外 ， 还 有 两 个 不 太 常 用 的 参数 。 

align: 表示 元 素 的 垂直 对 齐 方式 ， 值 可 以 是 tpp，middle，bottom ， 默 认为 middle。 

bgcolor: 表示 运动 区 域 的 背景 色 ， 值 是 十 六 进 制 的 RGB 颜色 ， 默 认为 白色 。 


8.5 常用 CSS 布局 版 式 


前 面 介绍 CSS 布局 块 的 创建 ， 以 及 利用 CSS 规则 定位 布局 块 的 方法 ， 本 节 将 通过 三 个 上 机 练习 实例 
介绍 网 页 制作 中 常见 的 三 种 CSS 布局 版 式 。 和 希望 通过 本 节 的 学 习 ， 读 者 能 从 原来 的 表格 布局 跨 和 人 到 Web 
标准 布局 ， 能 使 用 Web 标准 制作 出 常见 的 页 面 。 


8.5.1 上 机 练习 一 一 列 固定 居中 


< 朱 习 目标 


列 居 中 布局 常用 于 显示 正文 或 文章 内 容 的 页 面 。 通 过 前 几 节 基 础 知识 的 。 8-4 上 机 练习 一 一 列 固 
讲解 ， 结 合 本 节 的 练习 实例 ， 使 读者 进一步 掌握 插入 Div 布局 块 ， 创 建 CSS 规 定居 中 
则 定位 布局 块 的 具体 操作 方法 ， 并 掌握 使 布局 块 水 平 居中 显示 的 设置 方法 。 
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各 设计 思路 
首先 新 建 一 个 空白 的 网 页 文件 ， 在 页 面 中 插入 一 个 Div 标签 ， 并 定义 CSS 规则 指定 布局 块 的 尺寸 和 
背景 颜色 。 然 后 使 用 同样 的 方法 插入 两 个 Div 标签 ， 并 设置 布局 块 的 属性 ， 最 终 效果 如 图 8-83 所 示 。 


图 8-83 ”一列 居 中 布局 示意 图 效果 


户 胡 操作 步 卫 

1. 新 建文 件 

启动 Dreamweaver CC 2018， 执 行 “文件 ” |“ 新建” 命令 ,在 弹出 的 “新 建文 档 ” 对 话 框 中 设置 文 
档 类 型 为 HTML， 无 框架 ， 新 建 一 个 空白 的 HTML 页 面 

2. 插 入 Div 

执行 “插入 ”| “Div” 命 令 ， 在 弹出 的 “插入 Div” 对 话 框 中 设置 布局 块 的 插入 位 置 为 “在 插入 点 ”， 
ID 为 head， 如 图 8-84 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 

3. 定义 选择 器 

打开 “CSS 设计 器 ”面板 , 单 击 “ 添 加 CSS 源 ” 按钮 ,在 弹出 的 下 拉 列 表 中 选择 “在 页 面 中 定义 ”命令 
然后 单 击 “添加 选择 器 ”按钮 ， 输 入 选择 器 名 称 #bead 

4. 定 义 CSS 属性 

切换 到 “属性 ”面板 的 “布局 ”类 别 ， 设 置 宽 ( width ) 为 500px， 高 (height ) 为 60px; 下 边 距 为 
8px， 左 、 右 边 距 为 auto; 为 便于 区 分 布局 块 ， 切 换 到 “背景 ”类 别 ， 设 置 背景 颜色 (background-color ) 
为 #ADDD17， 如 图 8-85 所 示 


图 8-84 “插入 Div” 对 话 框 图 8-85 设置 CSS 属性 
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切换 到 “代码 ”视图 ， 可 以 看 到 如 下 所 示 的 代码 : 


<style type="text/css"> 
#head { 
width: 500px; 
height: 60px; 
background-color: #ADDD17; 
margin-bottom: 8px; 


margin-right: autoy 
margin-left: auto; 


} 
</style> 


5. 插入 第 二 个 布局 块 
在 状态 栏 上 单 击 <div> 标签 选中 页 面 上 Div 布局 块 ， 将 鼠标 指针 放 在 布局 块 的 右 侧 ， 按 照 2~4 步 的 
方法 ,插入 第 二 个 Div 标签 content， 然 后 定义 CSS 规则 #content 设置 布局 块 的 外 观 ， 如 图 8-86 所 示 
对 应 的 CSS 代码 如 下 所 示 : 
#content { 
width: 500px; 
height: 200px; 
background-color: #FFB5B5; 
margin-bottom: 8px; 
margin-right: auto; 
margin-left: auto} 


3 


6. 插入 第 三 个 布局 块 

在 布局 块 content 中 单 击 , 然 后 连续 按 两 次 Ctrl+A 组 合 键 选 中 布局 块 ,。 将 指针 放 在 布局 块 右 侧 ,打开 “ 插 
入 ”面板 , 在 “HTML” 类 别 中 单 击 “Div” 按 钮 ， 插 入 第 三 个 布局 块 foot。 接 下 来 定义 CSS 规则 #foot 
设置 布局 块 的 外 观 ， 如 图 8-87 所 示 


+ 一 选择 器 : #content 
属性 

员 图 口 

时 布局 


width 
height 


margin 


background 
color 


图 8-86 设置 布局 块 content 的 CSS 属性 图 8-87 设置 布局 块 foot 的 CSS 属性 
对 应 的 CSS 代码 如 下 : 
#fo0t { 


width: 500px; 
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height: 40px; 
background-color: #31DBAF; 
margin-right: auto; 
margin-left: auto} 


此 时 预览 页 面 ， 可 以 看 到 如 图 8-88 所 示 的 效果 。 细 心 的 读者 可 能 会 发 现 ，Div 标签 与 页 面 的 左 、 
上 显示 有 边 距 ， 即 使 指定 Div 标签 的 左 、 上 边 距 为 0， 仍 显示 有 空白 。 事 实 上 ， 这 是 body 标签 的 默认 
边 距 。 

7. 设置 页 面 的 边 距 

打开 CSS 设计 器 ， 单 击 “ 添 加 选择 器 ”按钮 ， 输 入 选择 器 名 称 为 body， 然 后 在 “布局 ”属性 列表 中 
设置 边 距 为 0， 如 图 8-89 所 示 


图 8-88 页 面 的 默认 雇 距 图 8-89 设置 页 面 记 距 


对 应 的 CSS 代码 如 下 : 
body { 
margin: 0px}; 


} 
此 时 预览 页 面 ， 可 以 看 到 Div 标签 head 与 页 面 顶端 没有 空白 了 ， 如 图 8-83 所 示 


(以 知识 拓展 
布局 块 宽度 随 浏览 器 宽度 自 适应 
如 果 希 望 页 面 内 容 的 显示 宽度 随 着 浏览 器 的 宽度 改变 而 改变 ， 可 以 使 用 自 适应 宽度 的 Div 标签 。 使 
用 过 表格 布局 的 用 户 应 该 会 想到 使 用 宽度 的 百分比 。 例 如 ， 以 下 代码 指定 布局 块 的 宽度 为 浏览 器 宽度 的 
80%， 高 度 为 60px， 上 、 下 边 距 为 Opx， 且 水 平 居中 : 
#head { 
width: 80%; 
height: 60px; 
margin: 0px auto} 


} 
此 外 ， 如 果 不 指定 布局 块 的 宽度 ， 它 默认 是 相对 于 浏览 器 显示 的 ， 即 自 适应 宽度 。 
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8.5.2 ”上 机 练习 


二 全 3 卓 标 
本 练习 实例 设计 常见 的 左 、 右 两 列 并 排 的 布局 ， 这 种 布局 左 列 常用 于 显示 。 8-5 上 机 练习 一 左 、 有 

导航 菜单 ， 右 列 显示 正文 。 通 过 前 几 节 基础 知识 的 讲解 结合 本 节 的 练习 实例 ， 两 列 并 排 居中 

使 读者 了 解 Hoat 属性 的 使 用 方法 ， 并 掌握 整体 布局 居中 的 设置 技巧 。 


到 设计 思路 

首先 新 建 一 个 空白 的 网 页 文件 ， 在 页 面 中 插入 两 个 Div 标 
签 。 接 下 来 定义 CSS 规则 指定 布局 抉 的 尺寸 和 背景 颜色 ， 并 
使 用 float 属性 使 第 一 个 布局 块 向 左 浮动 。 然 后 设置 第 二 个 布 
局 块 的 边 距 ， 防 止 两 个 布局 块 重 伏 。 最 后 创建 洪 套 布局 块 使 
局 块 在 页 面 上 水 平 居中 ， 最 终 效果 如 图 8-90 所 示 


加 


本 


记忆 操作 步骤 图 8-90 左 列 固定 ， 布 列 自 话 应 宽度 布局 效果 

1. 新 建文 件 

启动 Dreamweaver CC 2018， 执 行 “文件 ”|“ 新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 设置 文 
档 类 型 为 HTML， 无 框架 ,新 建 一 个 空白 的 HTML 页 面 

2. 插入 第 一 个 Div 

执行 “插入 ”|“Div” 命 令 ， 在 弹出 的 “插入 Div” 对 话 框 中 设置 布局 块 的 插入 位 置 为 “在 插入 点 ”， 
ID 为 nav。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 

3. 插入 第 二 个 Div 


在 状态 栏 上 单 击 <Div> 标签 选中 第 一 个 布局 块 ,将 鼠标 指针 放 在 布局 块 的 右 侧 , 执行 “插入 ”|“Div” 
命令 ,插入 第 二 个 Div 标签 ，ID 为 content 

由 于 Div 2 默认 情况 下 占据 一 行 的 空间 ， 因 此 插入 的 两 个 布局 块 上 、 下 排列 。 要 想 让 下 
面 的 Div 移 到 右 侧 ， 就 需要 借助 CSS 的 浮动 属性 float 来 实现 

4. 定义 选择 器 

打开 “CSS 设计 器 ”面板 , 单 击 “ 添 加 CSS 源 ” 按钮 ,在 弹出 的 下 拉 列 表 中 选择 “在 页 面 中 定义 ” 命令 。 
然后 单 击 “ 添 加 选择 器 ”按钮 ， 输 入 选择 器 名 称 #0av 


+ ~ 属性 5. 定义 布局 块 nav 的 CSS 属性 
员 图 口 加 5 切换 到 “属性 ”面板 的 “布局 ”类 别 ， 设 置 宽 ( width ) 为 
园 布局 120px， 高 (height ) 为 200px， 找 到 float 属 性 单 击 “ 左 ” 按 
se : 钮 国 ; 为 便于 观察 效果 ， 切 换 到 “背景 ”类 别 ， 设 置 背景 颜色 
float (background-color ) 为 丁 FCCFF， 如 图 8-91 所 示 。 

切换 到 “代码 ”视图 ， 可 以 看 到 如 下 所 示 的 CSS 代码 : 


图 背景 

background- 轩 :rrccr <style type=”text/css”> 

color aav A 
width: 120px; 
height: 200px; 
background-color: #FFCCFF; 


float: left; 
图 8-91 设置 布局 块 nav 前 CSS 属性 } 


</style> 
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此 时 的 布局 效果 如 图 8-92 所 示 。 可 以 看 到 第 二 个 Div 标签 已 移 到 右 侧 。 

6. 定义 布局 块 content 的 CSS 属性 

打开 “CSS 设计 器 ”面板 ， 单 击 “ 添 加 选择 器 ”按钮 ， 输 入 选择 器 名 称 #content。 切 换 到 “属性 ” 
面板 的 “布局 ”类 别 , 设置 宽 ( width ) 为 240px, 高 (height ) 为 200px; 为 便于 观察 效果 , 切换 到 “背景 ” 
类 别 ,设置 背景 颜色 ( background-color ) 为 #99FFFF， 如 图 8-93 所 示 。 


图 8-92 浮动 效果 图 8-93 设置 布局 块 content 的 CSS 属性 


对 应 的 CSS 代码 如 下 : 

#content { 
height: 200px; 
width: 240px; 
background-color: #99FFFF;}; 

} 

此 时 预览 页 面 ,效果 如 图 8-94 所 示 。 布 局 块 content 的 实际 显示 宽度 只 有 120px， 而 不 是 指定 的 
240px。 这 是 因为 绝对 定位 元 素 的 位 置 依据 浏览 器 左上 角 开 始 计算 ， 布 局 块 content 的 一 部 分 与 nav 重 从 。 
接 下 来 设置 边 距 定 位 布局 块 

7. 设置 布局 块 content 的 左边 距 

打开 “CSS 设计 器 ”面板 ， 在 选择 器 列表 中 选择 #content。 切 换 到 “属性 ”面板 的 “布局 ”类 别 ， 
设置 左边 距 为 120px， 如 图 8-95 所 示 


图 8-94 页面 效果 图 8-95 设置 布局 块 content 前 左旋 距 
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对 应 的 CSS 代码 如 下 : 


#content { 
height: 200px; 
width: 240px; 
background-color: #99FFFF; 
margin-left: 120px; 


} 
此 时 的 页 面 效 果 如 图 8-96 所 示 。 
通常 页 面 内 容 都 居中 显示 , 接 下 来 的 步骤 使 两 列 布局 居中 。 在 8.5.1 图 8-96 页面 效果 
节 介 绍 了 一 列 居中 的 方法 ， 可 以 使 用 同样 的 方法 将 两 列 放置 在 一 列 中 ， 
使 布局 居中 
8. 谋 套 布局 块 
切换 到 “代码 ”视图 ， 选 中 两 个 Div 的 代码 ， 然 后 执行 “插入 ”|“Div” 命 令 ， 在 弹出 的 对 话 框 中 


指定 Div 标签 为 main， 即 可 将 两 个 Div 标签 放 人 一 个 父 标签 中 ， 如 图 8-97 所 示 


性 ” 


9. 定义 布局 块 的 CSS 属性 
打开 “CSS 设计 器 "面板 , 单 击 “ 添 加 选择 器 "按钮 ,在 出 现 的 空 行 中 输入 选择 器 名 称 #1ain。 切 换 到 *“ 属 
面板 的 “布局 ”类 别 ， 设置 宽 ( width ) 为 360px， 左 、 右 边 距 为 aato， 如 图 8-98 所 示 ， 


+ 一 选择 如 : #main 


tg\cho8\8.52 两 38 局 htmlr 


图 8-97 ”创建 嵌 套 布局 块 图 8-98 设置 布局 块 main 的 左 、 右 廊 距 


10. 设置 页 面 边 距 
打开 CSS 设计 器 ， 单 击 “ 添 加 选择 器 ”按钮 ， 输 入 选择 器 名 称 为 body， 然 后 在 “布局 ”属性 列表 中 


设置 边 距 为 0。 此 时 的 页 面 效果 如 图 8-90 所 示 , 左 、 右 两 列 的 宽度 都 是 固定 的 , 且 整 修 页 面 布 局 居中 显示 。 
8.5.3 上 机 练习 一 一 制作 三 列 布局 


< 冰 习 目标 


前 
宽 


本 练习 实例 设计 常见 的 一 种 三 列 布局 ， 左 列 和 右 列 固定 、 中 间 列 宽度 根据 浏览 器 宽度 自 适应 。 通 过 


两 节 练习 的 具体 讲解 ， 结 合 本 节 的 练习 实例 ， 使 读者 进一步 掌握 float 属性 的 使 用 方法 和 布局 块 自 适应 
度 的 设置 技巧 。 


设计 电路 


首先 新 建 一 个 空白 的 网 页 文件 ， 在 页 面 中 插入 三 个 Div 标签 ， 接 下 来 定义 CSS 规则 指定 布局 块 的 尺 
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二 和 背景 颜色 ， 并 使 用 float 属性 使 第 一 个 布局 块 向 左 浮动 ， 第 二 个 布局 块 向 右 浮动 ， 最 后 设置 第 三 个 布 
局 块 的 左 、 右 边 距 ， 防 止 布局 块 重 苹 ， 最 终 效果 如 图 8-99 所 示 


尖 弥 半 赴 剖 和 下 站 中 示 这 5caaear 的 容 还 于 是 示 庆 "二 到 交 六 容 ” :| 
二 


8-6 ”上 机 练习 一 一 制作 
三 列 布局 


图 8-99 页面 显示 效果 


户 胡 操作 步骤 

1. 新 建文 件 并 插入 Div 

启动 Dreamweaver CC 2018， 执 行 “文件 ”|“ 新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 设置 文 
档 类 型 为 HTML ,无 框架 ,新 建 一 个 空白 的 HTML 页 面 。 按 照 8.5.2 节 的 方法 ,执行 “插入 ”|“Div” 命 令 ， 
在 页 面 中 插入 三 个 Div 标签 ， 依 次 命名 为 #eft、#ight 和 #content。“ 代 码 ” 视 图 中 相应 的 代码 如 下 所 示 : 

<div id="left"> 此 处 显示 id "left” 的 内 容 </div> 

<div i ight"> 此 处 显示 id "right” 的 内 容 </div> 

<div id="content"> 此 处 显示 id "content"” 的 内 容 </div> 


2. 定义 左 列 的 CSS 属性 
打开 “CSS 设计 器 ”面板 ， 单 击 “ 添 加 CSS 源 ” 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 “在 页 面 中 定义 ” 
命令 。 然 后 单 击 “ 添 加 选择 器 ”按钮 ， 输 入 选择 器 名 称 翰 ei。 切换 到 “属性 ”面板 的 “布局 ”类 别 , 设 


置 宽 ( width ) 为 120px， 高 (height ) 为 400px， 向 左 浮动 ; 为 便于 观察 效果 ， 切 换 到 “背景 ”类 别 ， 设 
置 背景 颜色 ( background-color ) 为 放 FCCFF， 如 图 8-100 所 示 


3. 定义 右 列 的 CSS 属性 
使 用 上 一 步 同 样 的 方法 ， 设 置 选择 器 名 称 为 right， 宽 ( width ) 为 200px， 高 (height ) 为 400px， 
向 右 浮 动 ， 背 景 颜 色 (background-color ) 为 本 FCCFF， 如 图 8-101 所 示 


background 
coler 


图 8-100 设置 left 的 CSS 属性 图 8-101 设置 rifht 前 CSS 属性 
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从 8.5.2 节 的 例子 可 以 看 出 ， 要 让 中 间 的 布局 块 按 指定 宽度 显示 ， 应 设置 左 、 右 边 距 。 


4. 设置 中 间 列 的 CSS 属性 

按 上 一 步 同 样 的 方法 ， 设 置 选择 器 名 称 为 #ontent， 高 (height ) 为 400px， 左 边 距 120px， 右 边 距 
200px， 背 景 颜色 (background-color ) 为 # 丁 FCCFF， 如 图 8-102 所 示 。 

此 时 中 间 列 的 布局 框 模型 如 图 8-103 所 示 。 


图 8-102 设置 content 的 CSS 属性 图 8-103 ”中 间 列 的 布局 框 模型 


在 上 面 的 步骤 中 ， 由 于 没有 设置 中 间 列 的 宽度 ， 因 此 ， 该 列 的 宽度 将 随 浏览 器 宽度 的 变化 而 变化 。 
读者 可 以 通过 调整 文档 窗口 的 大 小 预览 效果 。 


昌 儿 教 你 一 招 : 如 果 要 创建 中 间 列 宽度 固定 的 三 列 布局 ， 则 应 将 三 列 布局 块 放置 在 一 个 父 布局 
块 中 ， 并 指定 布局 块 的 宽度 为 三 列 的 宽度 和 两 个 布局 块 之 间 的 间距 。 


8.6 ”实例 精 讲 一 一 流 金 岁月 


二 夭 习 目标 


Div 标签 在 网 页 布局 中 占有 十 分 重要 的 地 位 ， 不 仅 可 以 精确 定位 网 页 元 
素 ， 还 可 以 配合 表单 和 动作 制作 出 许多 经 典 的 特效 。 本 节 将 制作 一 个 Div 标 
签 的 简单 特效 ， 通 过 本 节 实 例 进一步 掌握 Div 布局 和 CSS 属性 的 设置 方法 。 ”8-7 实例 精 讲 


流 金 岁 月 


“设计 思路 

首先 使 用 Div 元 素 插入 图 片 和 文本 ， 通 过 定义 CSS 规则 定位 布局 块 的 位 置 ， 并 格式 化 文本 。 然 后 使 
“显示 - 隐藏 元 素 ” 行 为 实现 图 片 交换 的 效果 : 初始 时 在 页 面 上 只 显示 一 张 图 片 ， 如 图 8-104 所 示 ; 当 
鼠标 指针 移动 到 另 一 张 图 片 的 缩 略 图 上 时 ， 图 片 被 替换 ， 如 图 8-105 所 示 。 


2 制作 重点 
(1 ) 通过 对 样式 表 的 移动 ， 将 内 部 样式 表 移 至 外 部 样式 表 文件 当中 。 
(2 ) 通过 设置 margin 属性 和 position 属性 实现 布局 块 的 重 每 。 
(3 ) 使 用 行为 和 visibility 属性 实现 布局 块 的 显示 和 隐藏 。 
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图 8-104 实例 效果 1 图 8-105 实例 效果 2 


户 鸭 操作 步 要 


(1 ) 启动 Dreamweaver CC 2018， 新 建 一 个 文档 ,设置 背景 图 像 ， 字 体 为 “方正 粗 倩 简体 "， 颜 色 为 
#000， 大 小 为 100px， 标 题 为 “ 流 金 岁月 ”并 保存 。 

(2 ) 单 击 “ 插 入 ”|“HTML” 面 板 中 的 “Div” 的 图 标 ， 在 弹出 的 “插入 Div” 对 话 框 中 指定 ID 为 
picl。 删 除 Div 标签 中 的 占 位 符 文本 ， 插 和 人 一 幅 图 像 。 

(3 ) 打开 “CSS 设计 器 ” 面板 , 单 击 “ 添 加 CSS 源 ” 按钮 ,在 弹出 的 下 拉 列 表 中 选择 “在 页 面 中 定义 ”; 
单 击 “ 添 加 选择 器 ”按钮 ， 输 入 选择 器 名 称 #ic1， 在 “布局 ”属性 列 示 
表 中 设置 width: 408px，height: 398px; 切换 到 “文本 ”属性 列表 ,设置 外 
text-align: center， 此 时 的 页 面 效果 如 图 8-106 所 示 。 

(4) 单 击 “ 插 入 ”| "HTML” 面板 中 的 “Div” 的 图 标 ,在 弹出 的 “ 插 
人 Div” 对 话 框 中 指定 也 为 liu。 删除 Div 标签 中 的 占 位 符 文本 , 输入 ， 
文字 “ 流 ”。 | 

(5) 打开 “CSS 设计 器 ”面板 ， 单 击 “ 添 加 CSS 源 ” 按 钮 ， 在 弹 
出 的 下 拉 列 表 中 选择 “在 页 面 中 定义 ”; 单 击 “添加 选择 器 ”按钮 ， 输 | 
入 选择 器 名 称 #iu， 然 后 在 “布局 ”属性 列表 中 设置 width: 120px， | 
height: 115px，padding-top: 10px; 切换 到 “文本 ”属性 列表 ,设置 text- 
align: center; 切换 到 “背景 ”属性 列表 ， 设 置 background-color: 手 60。 丁 8-106 页 而 效果 1 

本 步 使 用 CSS 设计 器 可 视 化 定义 CSS 规则, 如果 读者 熟悉 CSS 代码 规范 ,建议 直接 写 代码 以 提高 效率 。 

(6) 按照 上 面 两 步 的 方法 再 插入 三 个 Div 标签 ，D 分 别 为 jn，sui，yue。 删 除 占 位 符 文本 后 ， 并 分 
别 输入 文本 “人 金 ”“ 岁 ”“ 月 ”。 

(7) 打开 “CSS 设计 器 ”面板 ， 单 击 “ 添 加 选择 器 ”按钮 ， 添 加 三 个 选择 器 扩 in，#sui 和 #yue， 并 
分 别 定义 规则 ， 代 码 如 下 : 

#jin { 

width: 120pxy 
height: 115px; 
padding-top: 10px; 


text-align: center; 
background-color: #9966FF; 
} 
#sui { 
width: 120px; 
height: 115px; 
padding-top: 10px; 
text-align: center; 
background-color: #999900; 


228 Breemmweevar 人 人 2018 
审 刘 并 入门 与 纺 高 


#yue { 
width: 120px; 
height: 115px; 
padding-top: 10px; 
text-align: center; 
background-color: #99CCFF; 


小 
此 时 的 页 面 效果 ， 如 图 8-107 所 示 。 

上 面 的 代码 有 些 元 余 ， 接 下 来 修改 样式 代码 。 : 1 
(8) 打开 “CSS 设计 器 ”面板 ， 添 加 一 个 组 选择 器 夫 iu,##in,#suij#yue 定义 Div | 月 


标签 的 宽 、 高 、 文 本 对 齐 方式 和 上 填充 ， 修 改 后 的 代码 如 下 : 


<style type="text/css"> 

body { 
background-image: url(../images/bg2.jpg); 
color: #000000; 
font-family: "方正 粗 倩 简体 "》 


font-size: 100px; 


图 8-107 页 面 效果 2 


#1iu,#jin,#sui,#yue{ 
width: 120px; 
height: 11l5px; 
text-align: center; 
padding-top: l0px} 
} 
#1liu { 
background-color: #FF6600; 
} 
#jin { 
background-color: #9966FF;}; 
} 
#sui { 
background-color: #999900; 
} 
#yue { 
background-color: #99CCFF}; 
} 


</style> 


接 下 来 使 用 position 属性 对 Div 块 进行 定位 。 
(9) 打开 “CSS 设计 器 ”面板 ， 修 改选 择 器 #sui 的 规则 。 切 换 到 “布局 ”属性 列表 ， 设 置 position: 
absolute ,left: 450px ,top: 160px.。 同样 的 方法 ,修改 选择 器 圾 iu , 芍 站 , 拓 ue 的 规则 定义 。 修 改 后 的 代码 如 下 : 


<style type="text/css"> 

body { 
background-image: url(../images/bg2.jpg); 
color: #000000} 
font-family: "方正 粗 倩 简体 "; 
font-size: 100px; 

} 

#picl { 
width: 408px; 
height: 398px; 
text-align: center; 
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#1iu,#jin,#sui,#yue{ 
width: 120px; 
height: 115px; 
text-align: center; 
padding-top: 10pxi 
position: absolute; 


$ 

#liu { 
background-color: #FF6600; 
left: 660px; 
top: 160px; 

} 

#jin { 
background-color: #9966FF; 
left: 550px; 
top: 255px} 

二 

#sui { 
background-color: #999900; 
left: 450px; 
top: 160px; 

. 

#yue { 
background-color: #99CCFF; 
left: 550px;} 
top: 55px} 

二 

</style> 


此 时 的 页 面 效 果 ， 如 图 8-108 所 示 。 


8-108 ”页面 效果 3 


(10 ) 单 击 “ 插 入 ”|“HTML” 面 板 中 的 “Div” 的 图 标 ， 在 弹出 的 “插入 Div” 对 话 框 中 指定 了 D 为 
slt。 删 除 Div 标签 中 的 占 位 符 文本 ， 输 入 一 张 图 片 。 然 后 添加 选择 器 #slt 定位 图 片 位 置 。 代 码 如 下 : 


#slt { 
width: 92px; 
height: 92px; 
position: absolute; 
left: 570px; 
top: 180px? 
z-index: -1} 


下 


上 面 的 代码 使 用 z-index 设置 布局 块 slt 的 堆 琶 顺序 ， 将 其 值 指定 为 -1， 使 该 布局 块 位 于 其 他 布局 块 
下 层 。 
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此 时 的 页 面 效 果 如 图 8-109 所 示 。 


图 8-109 页 面 效果 4 


(11 ) 打开 “CSS 设计 器 ”面板 ， 修 改选 择 器 和 icl 的 visibility 属性 为 hidden， 隐 藏 Div 布局 块 picl。 

此 时 ， 在 “设计 ”视图 中 仍 可 看 到 布局 块 picl ， 切 换 到 “实时 视图 "， 可 以 看 到 布局 块 picl 已 隐藏 。 

(12 ) 为 便于 在 “设计 ”视图 中 编辑 并 查看 页 面 效果 ， 可 以 在 “代码 ”视图 中 将 布局 块 picl 相关 的 
代码 进行 注释 。 如 下 所 示 : 

<!--<div id="picl"><img src="../images/pl.jpg" width="407" height="397" alt="tul"/></div>--> 

(13 ) 切换 到 “代码 ”视图 ， 在 布局 块 picl 相关 代码 下 添加 一 行 如 下 代码 ， 即 可 在 页 面 中 插入 一 个 
Div 布局 块 pic2， 并 插入 图 形 : 


<!--<div id="picl"><img src="../images/pl.jpg" width="407" height="397" alt="tul"/></div>--> 
<div id="pic2"><img src="../images/p2-2.jpg" width="407" height="397" alt="tu2"/></div> 


此 时 的 页 面 效 果 ， 如 图 8-110 所 示 。 


图 8-110 页面 效果 5 


(14 ) 打开 “CSS 设计 器 ”面板 ， 添 加 选择 器 和 ic2， 并 定义 如 下 规则 : 


#pic2 { 
width: 408px; 
height: 398px; 
visibility: hidden; 
} 
上 述 代码 使 用 visibility: hidden， 使 布局 块 pic2 初始 时 在 页 面 中 隐藏 。 
(15 ) 切换 到 “代码 ”视图 ， 修 改选 择 器 #icl 的 visibility 属性 为 visible， 并 取消 “代码 ”视图 
Div 块 picl 的 相关 注释 。 
接 下 来 使 用 “行为 ”面板 创建 布局 块 的 显示 和 隐藏 效果 。 
(16 ) 在 “设计 ”视图 中 选中 Div 块 st， 执 行 “窗口 ”|“ 行 为 ”命令 ， 打 开 “ 行 为 ”面板 。 
(17 ) 单 击 “添加 行为 ”按钮 , 从 弹出 的 下 拉 菜 单 中 选择 “显示 - 隐藏 元 素 ”命令 , 弹出 “显示 - 隐藏 
元 素 ” 对 话 框 。 
(18 ) 在 对 话 框 中 的 元 素 列 表 中 选择 Div pic1， 然 后 单 击 “ 隐 藏 ”按钮 ; 选择 Div pic2， 然 后 单 击 “ 显 


车 
dU 
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示 ” 按 钮 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

(19 ) 单 击 事件 下 拉 列 表 按 钮 ， 从 弹出 的 事件 列表 菜单 中 选择 OnMouseOver。 

(20 ) 为 Div slt 添加 第 二 个 “显示 - 隐藏 元 素 ” 行 为 。 在 “显示 - 隐藏 元 素 ” 对 话 框 中 选择 Div pic2， 
然后 单 击 “隐藏 ”按钮 ; 选择 Div pic1， 然 后 单 击 “ 显 示 ” 按 钮 。 单 击 “ 确 定 ”按钮 关闭 对 话 框 后 ， 设 置 
事件 为 OnMouseOnut。 

(21 ) 保存 文档 ， 并 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 8-111 和 图 8-112 所 示 。 


图 8-111 移 开 鼠标 指针 的 效果 图 图 8-112 鼠标 指针 移 到 图 片上 的 效果 图 


初始 时 ， 页 面 效果 如 图 8-111 所 示 ， 将 鼠标 指针 移 到 布局 块 slt 上 时 ， 显 示 效 果 如 图 8-112 所 示 ， 可 
以 看 到 布局 块 pic2 的 位 置 并 不 与 picl 相同 ; 移 开 鼠 标 指针 时 ， 显 示 效 果 如 图 8-111 所 示 。 

接 下 来 修改 布局 块 pic 的 CSS 定义 ， 使 其 位 置 与 picl 一 致 

(22 ) 打开 “CSS 设计 器 ”面板 ， 选 中 选择 器 和 ic2， 在 “布局 ”属性 列表 中 设置 上 边 距 为 -398px。 
或 直接 切换 到 “代码 ”视图 ， 在 加 ic2 的 定义 中 添加 如 下 代码 : 


margin-top: -398px;} 


将 边 距 设 为 负 值 ， 可 以 实现 容器 与 容器 之 间 的 重 蚕 显示 。 
此 时 ， 打 开 浏 览 器 预览 页 面 ， 将 鼠标 指针 移 到 布局 块 slt 上 时 ， 页 面 效果 如 图 8-105 所 示 。 


8.7 答疑 解 惑 


1. 在 Dreamweaver CC 2018 中 加 载 CSS 样式 有 哪 几 种 方式 ? 

答 : 加 载 CSS 样式 有 四 种 : 行内 样式 、 内 部 样式 、 外 部 样式 、 导 入 样式 。 

行内 样式 是 在 标签 内 以 style 标记 的 样式 ， 只 针对 标签 内 的 元 素 有 效 。 由 于 这 种 形式 没有 与 内 容 相 分 
离 ， 所 以 不 建议 使 用 。 

内 部 样式 是 以 <style> 和 </style> 结尾 ， 写 在 当前 页 面 源 代码 的 head 标签 内 的 样式 ， 只 能 应 用 于 当 
前 页 面 中 的 元 素 ， 不 能 作用 于 其 他 页 面 。 

外 部 样式 是 把 CSS 单独 写 到 一 个 CSS 文件 中 ,然后 在 源 代码 中 以 link 方式 链接 。 不 但 本 页 可 以 调用 ， 
其 他 页 面 也 可 以 调用 ， 是 最 常用 的 一 种 形式 。 

导入 样式 是 以 @import wl 标记 所 链接 的 外 部 样式 表 ， 一 般 常用 在 另 一 个 样式 表 内 部 ， 可 以 使 代码 达 
到 很 好 的 重用 性 。 

2. CSS 样式 有 优先 级 吗 ? 

答 ; CSS 样式 的 优先 级 为 : ID 优先 级 高 于 class; 后 面 的 样式 覆盖 前 面 的 ; 指定 的 高 于 继承 ; 行内 样 
式 高 于 内 部 或 外 部 样式 。 
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3. 定义 超 链 接 的 CSS 样式 是 否 有 先后 顺序 ? 

答 : 定义 超 链接 的 CSS 样式 应 有 先后 顺序 。 否 则 ， 某 些 浏览 器 可 能 不 会 显示 某 个 样式 的 效果 。 定 义 
超 链接 的 CSS 样式 应 遵循 的 顺序 如 下 : 

a:link ( 超 链接 的 默认 样式 ) 一 avisited ( 已 访问 的 链接 样式 ) 一 a:hover ( 鼠标 指针 经 过 时 的 链接 样式 ) 
一 aiactive ( 鼠标 左 键 按 下 瞬间 的 链接 样式 )。 可 以 简单 记 为 L-V-H-A。 


8.8 学 习 效果 自 测 


一 、 选 择 题 
1. CSS 的 全 称 是 ( )， 中 文 译作 ( )。 
A. Cascading Style Sheets ， 层 琶 样 式 表 
B. Cading Style Sheets， 层 次 样式 表 
C. Cading Style Sheets ， 层 笃 样 式 表 
D. Cascading Style Sheets， 层 次 样式 表 
2. 下 面 属于 类 选择 器 的 是 ( 和 
A. #myTable B. .mystyle C.td D. #mylink a:hover 
3. 选择 器 类 型 为 “标签 "， 表 示 ( 外 
A. 用 户 自 定义 的 CSS 样式 可 以 应 用 到 网 页 中 的 任何 标签 上 
B. 对 现 有 的 HTML 标签 进行 重新 定义 ， 当 创建 或 改变 该 样式 时 ， 所 有 应 用 了 该 样式 的 格式 都 会 自 
动 更 新 
C. 对 某 些 标签 组 合 或 者 是 含有 特定 ID 属性 的 标签 进行 重新 定义 样式 
D. 以 上 说 法 都 不 对 
4. 如 果 要 使 一 个 网 站 的 风格 统一 并 便于 更 新 ， 在 使 用 CSS 样式 的 时 候 ， 最 好 使 用 )。 
A. 外 部 链接 样式 表 B. 内 做 式样 式 表 C. 局 部 应 用 样式 表 D. 以 上 三 种 都 一 样 
5. 下 面 属于 ID 选择 器 的 是 ( )。 
A.img B. a:link C. #main D. .tdstyle 
二 、 判 断 题 
1. 使 用 CSS 样式 表 可 以 将 网 页 的 格式 和 结构 分 离 。( ) 
2. 在 Dreamweaver CC 2018 中 ， 只 能 通过 使 用 “CSS 设计 器 ”面板 定义 CSS 样式 。( ) 
3. 在 定义 类 样式 表 时 ， 类 样式 表 的 名 称 可 以 任意 设置 。( ) 
4. 在 “CSS 设计 器 ”中 指定 的 宽度 即 为 整个 盒 模型 的 宽度 。( ) 
三 、 填 空 题 
1. 在 Dreamweaver CC 2018 中 ， 可 以 使 用 ( ) 编辑 CSS 层 秋 样式 表 。 
2. CSS 样式 表 文件 的 扩展 名 为 ( )。 
3. 在 Dreamweaver CC 2018 中 ,根据 选择 器 的 不 同类 型 ,CSS 样式 被 划分 为 四 大 类 , 即 ( Wl 六 
人 尖 
4. 超 链 接 样式 包括 ( )s )、( A js 
5. 在 页 面 中 定义 的 CSS 样式 表 会 位 于 页 面 HTML 代码 的 ( ) 标签 当中 。 


四 、 操 作 题 
仿照 本 章 的 实例 精 讲 ， 制 作 一 个 简单 的 页 面 ， 并 使 用 CSS 样式 表 美化 页 面 。 
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: 浏览 者 在 浏览 网 页 时 ， 常 会 遇 到 一 些 互动 的 网 页 , 如 会 员 注册 、 
留言 板 、 评 论 等 ,这些 网 页 称 为 表单 页 面 。 使 用 表单 可 以 收集 来 自用 
户 的 信息 ， 建 立 网 站 与 浏览 者 之 间 沟 通 的 桥梁 。 获 取 用 户 购物 订单 ， 

收集 、 分 析 用 户 的 反馈 意见 ， 作 出 科学 合理 的 决策 ， 是 一 个 网 站 成 功 


lb 的 重要 因素 。 表 单 是 交互 式 网 站 的 基础 ， 在 网 页 中 得 到 广 > 六 3 
: 表单 中 包含 多 种 对 象 ( 也 称 作 表单 控件 )。 如 ， 用 于 输入 文字 的 
文本 域 、 用 于 发 送 命令 的 按钮 、 用 于 选择 的 单 选 框 和 复 选 框 、 用 于 书 
置信 息 的 选择 框 ， 等 等 。 如 果 熟 悉 某 种 脚本 语言 ， 用 户 还 可 以 编写 脚 

本 或 应 用 程序 来 验证 输入 信息 的 正确 性 。 : 
: 本 章 将 着 重 介绍 表单 及 表单 控件 的 属性 设置 ， 并 结合 练习 实例 ， 
使 读者 掌握 创建 表单 网 页 的 方 


力量 @@ 
I 
令 掌握 设置 表单 元 素 的 属性 
全 熟悉 表单 提交 与 验证 的 方法 
全 学 习 制 作 表单 网 页 实例 
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9.1 认识 表单 


表单 是 Internet 用 户 与 服务 器 进行 信息 交流 最 重要 的 工具 。 一 个 完整 的 表单 应 该 有 两 个 重要 组 成 部 
分 : 一 是 含有 表单 和 表单 控件 的 网 页 文档 ， 用 于 收集 用 户 输入 的 信息 ; 另 一 个 是 用 于 处 理 用 户 输入 信息 的 
服务 器 端 应 用 程序 或 客户 端 脚本 ， 如 CGI、JSP、ASP， 等 等 。 用 户 提交 表单 之 后 ， 即 可 将 表单 内 容 传送 
到 服务 器 上 ， 并 由 事先 撰写 的 脚本 程序 处 理 ， 最 后 再 由 服务 器 将 处 理 结果 传 回 给 浏览 者 ， 即 提交 表单 之 
后 出 现 的 页 面 。 


9.1.1 插 人 表单 


在 “设计 ”视图 中 要 插入 表单 的 位 置 单 击 ， 然 后 执行 “插入 ”|“ 表 单 ”|“ 表 单 ”命令 ; 或 者 在 如 图 
9-1 所 示 的 “表单 ”插入 面板 上 单 击 “ 表 单 ” 按 钮 图 ， 即 可 在 页 面 中 插入 表单 ， 如 图 9-2 所 示 ， 用 红色 的 
虚线 框 表示 插入 的 表单 。 


图 9-1 “表单 ”插入 面板 图 9-2 插入 的 表单 
如 果 看 不 到 虚线 框 ， 可 以 执行 “查看 ”|“ 设 计 视图 选项 ”|“ 可 视 化 助理 ”|“ 不 可 见 元 素 ”命令 ， 显 
示 红 色 的 轮廓 线 。 


得 儿 提示 : 表单 标记 可 以 嵌 套 在 其 他 HTML 标记 中 ， 其 他 HTML 标记 也 可 以 嵌 套 在 表单 中 。 
但 是 ， 一 个 表 单 不 能 嵌 套 在 另 一 个 表单 中 。 


9.1.2 设置 表单 属性 


与 其 他 网 页 元 素 一 样 ， 表 单 也 有 对 应 的 “属性 ”面板 。 将 鼠标 指针 移 到 插入 的 表单 上 单 击 选中 表单 ， 
然后 选择 “窗口 ”|“ 属 性 ”命令 ， 即 可 打开 如 图 9-3 所 示 的 表单 属性 面板 。 


图 9-3 表单 的 “属性 ”面板 


YN ID: 对 表单 命名 以 进行 识别 。 该 名 称 对 应 于 <form> 标签 的 ID 属性 ， 必 须 唯 一 。 只 有 为 表单 命名 
后 ， 表 单 才 能 被 脚本 语言 引用 或 控制 。 

和 9 类 (Class ): 为 表单 指定 CSS 样式 。 

和 动作 ( Action ): 指明 用 于 处 理 表 单 信息 的 脚本 或 动态 页 面 的 路 径 。 如 果 希 望 该 表单 通过 E-mail 
方式 发 送 ， 而 不 被 服务 器 端 脚本 处 理 ， 则 输入 mailto:+ 希 望 发 送 到 的 E-mail 地址， 例如 
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mailto:webmaster@website.com。 

9 方法 (Method ): 选择 将 表单 数据 传输 到 服务 器 的 方法 。 “POST” 方 法 把 表单 数据 嵌入 到 HTTP 
请 求 中 发 送 ， 对 传送 的 数据 量 没有 限制 ;“GET” 方 法 把 表单 数据 附加 到 请 求 URL 中 发 送 ， 对 传 
送 的 数据 量 做 了 限制 ; “默认 ”方法 使 用 浏览 器 的 默认 设置 将 表单 数据 发 送 到 服务 器 。 默 认 方法 
为 GET。 


四 提示 : 不 要 使 用 GET 方法 发 送 长 表单 。URL 的 长 度 限制 在 8192 个 字符 以 内 。 如 果 发 送 的 
数据 量 大 大 ， 数 据 将 被 截断 ， 从 而 导致 意外 的 或 失败 的 处 理 结果 。 而 且 ， 在 发 送 机 密 用 户 名 和 密码 、 
信用 卡号 或 其 他 机 密 信息 时 ， 用 GET 方法 传递 信息 不 安全 。 


和 目标 ( Target ): 用 于 设置 表单 被 处 理 后 ,反馈 网 页 打开 的 方式 。 有 四 个 选项 ,意义 与 超级 链接 的 “ 目 
标 ” 属 性 相同 ， 在 此 不 再 重复 介绍 。 

站 编码 类 型 ( Enctype ): 指定 对 提交 给 服务 器 进行 处 理 的 数据 使 用 的 MIME 编码 类 型 。 默 认 设 置 
application/x-www-form-urlencode 通常 与 POST 方法 协同 使 用 。 如 果 要 创建 文件 上 传 域 ， 则 应 指 
定 multipart/form-data 类 型 。 

字符 集 ( Accept Charset ): 可 接受 的 字符 集 。 它 标示 文档 的 语言 编码 。Dreamweaver CC 2018 默认 
使 用 UTF-8 编码 创建 Unicode 标准 化 表单 。 

Y 不 验证 (No Validate ): 提交 表单 时 不 对 form 或 input 域 进 行 验证 。 

和 自动 完成 (Auto Complete ): 在 表单 项 中 输入 字符 后 ， 将 显示 可 自动 完成 输入 的 候选 项 列表 。 

Y 标题 (Title ): 指定 表单 的 额外 信息 ， 在 浏览 器 中 显示 为 工具 提示 ， 

例如 ， 在 属性 面板 上 的 ID 文本 框 中 输入 firstform; Action 文本 框 中 输入 resultasp; 在 Target 下 拉 列 

表 中 选择 “_blank”， 其 他 保留 默认 设置 。 在 “代码 ”视图 中 看 到 类 似 如 下 的 代码 : 
<form id="firstform" action="result.asp" method="post" target=" blank" > 


</form> 


如 图 9-4 所 示 。 


-Untitled-l* 


图 9-4 表单 的 相关 代码 


这 段 代码 表示 将 名 为 frstform 的 表单 以 post 的 方式 提交 给 result.asp 进行 处 理 ， 且 提交 结果 在 一 个 新 
的 页 面 显示 ， 提 交 的 MIME 编码 为 默认 的 application/x-www-form-urlencode 类 型 。 


生 注意 : 在 Dreamweaver CC 2018 中 ， 可 以 设置 的 属性 包括 HTMLS5 规范 中 列 出 的 所 有 属性 。 
所 有 这 些 属性 并 非 都 存在 于 “属性 ”面板 中 ， 用 户 可 以 在 “代码 ”视图 中 添加 不 存在 于 “属性 ” 面 
板 中 的 属性 。 
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9.2 ”创建 表单 控件 


创建 表单 之 后 ， 就 可 以 在 表单 内 创建 各 种 表单 控件 。 表 单 的 所 有 元 素 都 应 包含 在 表单 标签 
<form>…</form> 之 中 。 在 Dreamweaver CC 2018 中 ,对 表单 对 象 的 操作 命令 ,主要 集中 在 “插入 "| 表单 ” 
命令 中 ; 或 如 图 9-5 (a ) 所 示 的 “表单 ”插入 面板 中 。 隐 藏 标签 后 的 “表单 ”面板 如 图 9-5 (b ) 所 示 。 


9.2.1 文本 域 

文本 域 是 网 页 中 供用 户 输入 文本 的 区 域 ， 可 以 接受 任何 类 型 的 文本 、 字 母 或 数字 。Dreamweaver CC 
2018 中 的 文本 域 有 三 种 : 文本 字段 、 文 本 区 域 和 密码 。 

1. 插入 文本 字段 

文本 字段 是 通常 用 于 插入 单行 文本 的 文本 框 。 切 换 到 表单 的 “设计 ”视图 ， 在 要 插入 文本 字段 的 位 
置 单 击 鼠 标 ， 执 行 “ 搬 入 ”|“ 表 单 ”|“ 文 本 ”命令 ， 或 者 单 击 “表单 ”插入 面板 中 的 “文本 ”按钮 ， 如 
图 9-6 所 示 ， 即 可 插入 一 个 文本 字段 ， 如 图 9-7 所 示 


图 9-6 选择 “文本 ”按钮 图 9-7 插入 文本 字段 


昌 / 提示 : 插入 表单 控件 之 前 ， 应 先 创建 表单 。 如 果 表单 控件 不 在 表单 中 ， 其 对 应 的 参数 值 不 


能 被 提交 。 
选中 插入 的 文本 字段 ,可 以 修改 文本 字段 的 标签 占 位 文本 "Text Field:", 还 可 以 在 如 图 9-8 所 示 的 “ 属 
性 ”面板 上 设置 属性 。 
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图 9-8 “属性 ”面板 


SName ( 名称 ): 用 于 设置 文本 字段 的 唯一 名 称 ， 可 以 使 用 字母 、 数 字 、 字 符 和 下 画 线 的 任意 组 合 ， 

但 不 能 包含 空格 或 特殊 字符 。 该 名 称 可 以 被 脚本 或 程序 引用 。 

Size ( 字符 宽度 ): 用 于 设置 文本 字段 的 宽度 ， 单 位 为 字符 数 或 像素 。 

Max Length ( 最 多 字符 数 ): 用 于 设置 文本 字段 中 最 多 可 以 输入 的 字符 数 。 

Value ( 初始 值 ): 用 于 设置 文本 字段 被 显示 时 的 初始 文本 。 

Read Only ( 只 读 ): 用 于 将 文本 字段 的 值 设 置 为 只 读 。 

Required ( 必 填 ): 用 于 指定 在 将 表单 提交 给 服务 器 时 ， 文 本 字段 是 否 必须 包含 数据 ( 不 能 为 空 )。 

Disabled ( 禁用 ): 禁用 文本 字段 。 

Auto Focus ( 自动 聚焦 ): 在 页 面 加 载 时 ， 该 域 自动 获取 焦点 。 该 HTML5 表单 元 素 属性 适用 于 所 

有 <input> 标签 的 类 型 。 

和 Form (表单 ): 指定 文本 字段 所 属 的 表单 。 该 属性 适用 于 所 有 <input> 标签 的 类 型 ， 必 须 引用 所 属 
表单 的 id。 
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但 提示 : 如 需 引用 一 个 以 上 的 表单 ， 使 用 空格 进行 分 隔 。 


和 Pattern ( 匹配 ): 指定 文本 字段 内 容 的 模式 ( 正则 表达 式 )， 用 于 验证 输入 的 内 容 是 否 合 乎 要 求 。 
和 Tab Index ( Tab 键 索引 ): 辅助 功能 ， 为 表单 对 象 指定 在 当前 文档 中 的 Tab 顺序 。 如 果 为 一 个 对 象 
设置 Tab 顺序 ， 则 须 为 所 有 对 象 设置 Tab 顺序 。 
和 Place holder: 用 于 设置 描述 输入 字段 的 预期 值 的 提示 信息 。 输 入 域 为 空 时 显示 提示 信息 ， 输 入 域 
获得 焦点 时 提示 信息 消失 。 
3 List ( 列表 ): 指定 输入 字段 的 选项 列表 。 
例如 ， 将 文本 字段 的 标签 占 位 文本 “Text Field: ”修改 为 “了 昵称: ”; 在 “属性 ”面板 上 的 “Name” 
文本 框 中 输入 字段 的 名 称 “textfield"; 在 “Size”( 字符 宽度 ) 中 输入 20,“Max Length”( 最 大 字符 数 ) 
设置 为 18; 在 “Value”( 初始 值 ) 文本 框 输入 “行云流水 ”， 页 面 效果 如 图 9-9 所 示 。 
2. 插入 密码 字段 
如 果 用 户 希 望 保护 自己 的 输入 信息 不 被 他 人 看 到 时 ， 可 以 使 用 密码 字段 。 密 码 字 段 和 文本 字段 的 设 
置 方 法 相同 ,不 同 的 是 ， 在 密码 字段 中 输入 字符 时 ， 字 符 将 自动 以 “@” 符 号 或 者 “*” 符 号 显示 ， 从 而 
起 到 保密 的 作用 。 
切换 到 表单 的 “设计 ”视图 , 在 要 插入 密码 字段 的 位 置 单 击 , 执行 “插入 ”|“ 表 单 ”| “密码 ”命令 ， 
或 在 “表单 ”插入 面板 中 单 击 “ 密 码 ” 按 钮 ， 如 图 9-10 所 示 ， 即 可 插入 一 个 密码 字段 ， 如 图 9-11 所 示 。 


图 9-9 添加 文本 字段 效果 图 9-10 选择 “密码 ”按钮 图 9-11 插入 密码 字段 
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选中 “密码 ”表单 对 象 ， 可 以 在 “属性 ”面板 上 看 到 如 图 9-12 所 示 的 属性 。 


图 9-12 “密码 ”属性 面板 


各 项 属性 的 功能 与 文本 字段 的 属性 类 似 ， 这 里 不 再 重复 介绍 。 

例如 ,将 密码 字段 的 标签 占 位 文本 “Password: ”修改 为 “密码 : ”, 然 后 在 属性 面板 中 设置 “Name ( 名 
称 为 "pwd";“Size( 字符 宽度 为 14,“Max Length( 最 多 字符 数 为 12; “Value( 初始 值 ”为 “Vivian”， 
页 面 效 果 如 图 9-13 所 示 。 


晶 ) 提示 : 输入 密码 字段 中 的 信息 不 会 以 任何 方式 被 加 密 ， 并 且 当 发 送 到 Web 管理 者 手中 时 ， 
它 会 以 常规 文本 的 形式 显示 。 


3. 插入 文本 区 域 

切换 到 表单 的 “设计 ”视图 ， 在 要 插入 文本 区 域 的 位 置 单 击 ， 执行 “插入 ”|“ 表 单 ”|“ 文 本 区 
域 ”命令 ,或 在 “表单 ”插入 面板 中 单 击 “ 文 本 区 域 ” 按 钮 , 如 图 9-14 所 示 , 即 可 插入 一 个 文本 区 域 ， 
如 图 9-15 所 示 。 


报信 

夫 昌 
四 ”日 其 
时 间 


日 期 后 
知 间 (当地) 
区 域 

入 记 


图 9-13 输入 密码 效果 图 9-14 选择 “文本 区 域 ”按钮 图 9-15 插入 文本 区 域 


“文本 区 域 ”的 “属性 ”面板 ， 如 图 9-16 所 示 。 


图 9-16 “文本 区 域 ” 属 性 面板 


和 Rows ( 行 数 ): 可 用 于 设置 文本 区 域 中 可 显示 的 行 数 。 

和 Cols ( 列 数 ); 可 用 于 设置 每 行 的 字符 数 。 

和 Wrap (换行 ): 设置 多 行文 本 的 换行 方式 。 如 果 选 择 “ 默 认 ” 和 “soft*， 则 输入 的 文本 内 容 超过 
文本 区 域 的 右边 界 时 ， 文 本 自动 换 到 下 一 行 ， 当 提交 数据 进行 处 理 时 ,数据 作为 一 个 数据 字符 串 

进行 提交 。 如 果 选 择 “hard” ， 则 在 文本 区 域 中 设置 自动 换行 ， 当 提交 数据 进行 处 理 时 ， 也 对 这 

些 数据 设置 自动 换行 。 

例如 ,将 文本 区 域 的 标签 占 位 文本 “Text Area:“ 修 改 为 “自我 介绍 : ”; 在 “属性 ”面板 中 设置 Name( 名 
称 ) 为 “info”;“Cols”( 字 符 宽度 ) 为 30,，Rows”( 行 数 ) 为 5, 即 最 多 能 输入 的 文本 行 数 为 5 行 ;“Value 
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(初始 值 ”为 “个 人 资料 说 明 ”， 此 时 的 页 面 效果 如 图 9-17 所 示 。 
9.2.2 ” 单 选 按钮 

在 表单 中 使 用 单 选 按钮 可 以 设置 预定 义 的 选项 。 单 选 按 钮 所 有 的 待 选项 是 一 个 整体 ， 对 于 选项 的 选 
择 具有 独占 性 ， 也 就 是 说 ， 在 单 选 按 钮 的 待 选项 中 ， 只 允许 有 一 个 选项 处 于 被 选中 状态 。 

1. 插入 单 选 按钮 

切换 到 表单 的 “设计 ”视图 ， 在 要 插入 单 选 按钮 的 位 置 单 击 ， 执行 “插入 ”|“ 表 单 ”|“ 单 选 按 
钮 ”命令 ,或 在 “表单 ”插入 面板 中 单 击 “ 单 选 按钮 ”按钮 , 如 图 9-18 所 示 , 即 可 插入 一 个 单 选 按 钮 ， 
如 图 9-19 所 示 。 


图 9-17 添加 文本 区 域 效 果 图 9-18 选择 “ 单 选 按钮 图 9-19 插入 单 选 按钮 


“ 单 选 按 钮 ”控件 的 “属性 ”面板 ， 如 图 9-20 所 示 


图 9-20 “ 单 选 按钮 ”属性 面板 


3 Name ( 名称 ); 用 于 设置 单 选 按钮 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 
和 Value ( 选 定 值 ): 用 于 设置 该 单 选 按钮 被 选中 时 的 值 ， 这 个 值 将 会 
和 Checked (选中 ): 用 于 设置 单 选 按钮 的 初始 状态 是 否 为 选中 。 同 
-组 单 选 按钮 中 只 能 有 一 个 按钮 的 初始 状态 是 选中 的 。 
例如 ,插入 两 个 单 选 按钮 ,修改 第 一 个 单 选 按钮 的 标签 为 “ 男 ”, 在 “ 属 
性 ”面板 上 设置 Name ( 名 称 ) 为 “gender”", Value ( 选 定 值 ) 为 “0”, 不 
选中 Checked ( 选中 ) 复 选 框 ; 修改 第 二 个 单 选 按钮 的 标签 为 “ 女 ", 在 “ 属 。 “图 9-21 插入 前 单 选 按钮 效果 
性 ”面板 上 设置 Name (名称 ) 为 “gender”, Value ( 选 定 值 ) 为 “1”, 不 
选中 Checked ( 选中 ) 复 选 框 ， 页 面 效 果 如 图 9-21 所 示 。 


名 注意 : 由 于 单 选 按钮 是 以 组 为 单位 的 ， 因 此 这 一 组 单 选 按钮 必须 拥有 同一 个 名 称 ， 但 值 不 能 
相同 。 


2. 插入 单 选 按钮 组 
如 果 需 要 添加 的 单 选 按钮 很 多 ， 逐 个 地 添加 ， 然 后 再 逐个 地 改名 ， 实 现 起 来 特别 繁琐 。 使 用 “ 单 选 
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按钮 组 ” 则 可 以 一 次 建立 一 组 单 选 按钮 。 


切换 到 表单 的 “设计 ”视图 , 在 要 插入 单 选 按钮 的 位 置 单 击 , 执行 “插入 ”| “表单 ”|“ 单 选 按钮 组 ” 
加 9-22 所 示 。 图 9-23 所 示 为 “ 单 选 按钮 组 ” 


命令 , 或 在 “表单 ”插入 面板 中 单 击 “ 单 选 按 钮 组 ”按钮 , 
对 话 框 。 


图 9-22 选择 “ 单 选 按钮 组 ” 图 9-23 
Y 名 称 : 用 于 定义 单 选 按钮 组 的 名 称 
Y 标签 : 用 于 设置 单 选 按钮 的 标签 名 称 
入 要 在 页 面 上 显示 的 单 选 按钮 的 标签 
Y 值 : 用 于 设置 该 选项 被 选中 时 对 应 的 值 
输入 值 。 
Y 国 和 国 按钮 : 用 于 添加 和 删除 单 选 按钮 
y 回 和 贺 较 钮 : 用 于 调整 当 


单 击 占 位 文本 “ 单 选 ”， 


单 击 占 位 文本 “ 单 选 ”， 


“ 单 选 按钮 组 ”对 话 框 1 


该 文本 框 即 变 为 可 编辑 状态 ， 输 


该 文本 框 即 变 为 可 编辑 状态 ， 


中 的 单 选 按钮 在 单 选 按钮 组 中 的 位 置 


布局 ， 使 用 : 用 于 设置 单 选 按钮 组 中 各 个 单 选 按钮 的 分 隔 方式 


例如 ,设置 单 选 按钮 组 的 名 称 为 世 , 各 个 选项 的 标签 和 对 应 的 值 如 图 9-24 所 示 。 
重信 如 图 9-25 所 示 的 单 选 按钮 组 


单 击 “ 确 定 ” 按 钮 ， 即 可 在 页 面 中 


单 远 按钮 组 


图 9-24 “ 单 选 按钮 组 ”对 话 框 (2) 


布局 方式 使 用 “表格 ”， 


计算 机 的 组 成 结构 为， 


A、 运算 器 、 控 制 器 和 存储 器 
:二 B、 软 件 系 统 和 硬件 系统 

C、 主机 与 外 围 设 备 

D、 系 统 软件 和 应 用 软件 


图 9-25 ”插入 的 单 选 按钮 组 


分 别 选 中 各 个 选项 ， 在 “属性 ”面板 上 可 以 看 到 所 有 选项 使 用 共同 的 名 称 ， 以 及 各 个 选项 对 应 的 值 。 


在 这 里 ， 用 户 可 以 设置 各 个 单 选 按钮 的 其 他 属性 。 
9.2.3 ” 复 选 框 


与 单 选 按钮 类 似 ， 复 选 框 也 


于 设置 预定 义 的 选项 。 不 同 的 是 每 个 复 选 框 都 是 独立 的 ， 选 中 与 否 只 
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是 在 进行 单个 选项 的 “打开 ”与 “关闭 ”状态 切换 ， 因 此 可 以 选中 多 个 选项 。 

1. 插入 复 选 框 

切换 到 表单 的 “设计 ”视图 , 在 要 插入 复 选 框 的 位 置 单 击 , 执行 “插入 ”|“ 表 单 ”|“ 复 选 框 ” 
命令 ,或 在 “表单 "插入 面板 中 单 击 “ 复 选 框 ”按钮 ,如 图 9-26 所 示 , 即 可 插入 一 个 复 选 框 ,如 图 9-27 


图 9-26 选择 “ 复 选 框 ” 图 9-27 “ 单 选 按钮 组 ”对 话 框 


“ 复 选 框 ”控件 的 “属性 ”面板 ， 如 图 9-28 所 示 


Doisabled DO Required 


口 Aute Focus 


图 9-28 复 选 框 的 “属性 ”面板 


3 Name ( 名称): 用 于 设置 复 选 框 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 


嫩 注意 : 与 单 选 按钮 不 同 ， 由 于 每 一 个 复 选 框 都 是 独立 的 ， 因 此 应 为 每 个 复 选 框 设置 唯一 的 
名 称 。 


3 Value ( 值 ): 用 于 设置 该 复 选 框 被 选中 时 的 值 ， 这 个 值 将 会 随 表单 提交 

和 Checked (选中 ): 用 于 设置 复 选 框 的 初始 状态 是 否 为 选中 

例如 ， 在 页 面 中 插入 四 个 复 选 框 ， 为 每 个 选项 设置 不 同 的 Name ( 名 称 ) 和 Value ( 值 )， 并 分 别 修 
改 复 选 框 的 标签 占 位 文本 ， 页 面 效果 如 图 9-29 所 示 。 


下 列 哪些 软件 是 Adobe 公 司 的 产品 ， 
沁 Photoshop Dreamweaver FrontPage Flash 


图 9-29 ”插入 复 选 框 的 效果 1 


2. 插入 复 选 框 组 

使 用 “ 复 选 框 组 ”控件 可 以 一 次 建立 一 组 复 选 框 。 

切换 到 表单 的 “设计 ”视图 , 在 要 插入 复 选 框 组 的 位 置 单 击 , 执行 “插入 ”|“ 表 单 ”|“ 复 选 框 组 ” 
命令 ， 或 在 “表单 ” 插 人 面板 中 单 击 “ 复 选 框 组 ”按钮 ， 如 图 9-30 所 示 ， 弹 出 如 图 9-31 所 示 的 “ 复 选 
框 组 ”对 话 框 。 
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图 9-30 选择 “ 复 选 框 组 ” 图 9-31 “ 复 选 框 组 ”对 话 杠 


该 对 话 框 的 设置 与 “ 单 选 按钮 组 ”对 话 框 的 设置 相同 ， 这 里 不 再 重复 介绍 。 
例如 ， 设 置 复 选 框 组 的 名 称 为 QX, 各 个 选项 的 标签 和 对 应 的 值 如 图 9-32 所 示 。 布 局 方式 使 用 “换行 
符 "， 单 击 “确定 ”按钮 ， 即 可 在 页 面 中 插入 如 图 9-33 所 示 的 复 选 框 组 


Welcome 
访问 权限 
| 口 QQ 好 友 
口 关注 友人 
| 口 其 他 人 使 用 “密码 问题 ”访问 
图 9-32 插入 复 选 框 组 的 效果 2 图 9-33 ”插入 复 选 框 组 的 效果 3 
分 别 选 中 各 个 选项 ， 在 “属性 ”面板 上 可 以 看 到 所 有 选项 使 用 共同 的 名 称 ， 以 及 各 个 选项 对 应 的 值 。 


在 这 里 ， 用 户 可 以 设置 各 个 复 选 框 的 其 他 属性 
9.2.4 ”选择 框 


选择 框 能 够 以 列表 的 形式 提供 一 系列 的 预 设 选择 项 ,这 对 于 空间 有 限 的 页 面 来 说 ,是 非常 不 错 的 选择 。 
在 Dreamweaver CC 2018 中 ， 用 户 可 以 在 表单 中 插入 两 种 类 型 的 选择 框 : 一 种 是 单 击 时 “下 拉 ” 的 菜单 ; 


另 一 种 是 显示 可 选项 的 滚动 列表 。 在 “属性 ”面板 中 创建 这 两 种 选择 框 的 方式 是 一 样 的 ， 却 可 提供 不 同 
的 功能 。 
和 下 拉 菜 单 : 通过 下 拉 方 式 显示 多 个 可 选项 ， 一 般 只 人 允许 选择 一 个 可 选项 。 


列表 : 通过 类 似 浏 览 器 滚动 条 的 滚动 框 显 示 多 个 可 选项 ， 并 可 以 自 定义 滚动 框 的 行 高 ， 允 许 浏览 
者 选择 一 个 或 多 个 选项 。 

切换 到 表单 的 “设计 ”视图 , 在 要 插入 选择 框 的 位 置 单 击 , 执行 “插入 ”|“ 表 单 ”|“ 选 择 框 ” 
命令 ,或 在 “表单 ”插入 面板 中 单 击 “ 选 择 框 "按钮 ,如 图 9-34 所 示 , 即 可 插入 一 个 选择 框 ,如 图 9-35 
所 示 。 

“选择 框 ”控件 的 “属性 ”面板 ， 如 图 9-36 所 示 。 

3 Size (大 小 ): 用 于 设置 列表 显示 的 大 小 。 

9 列表 值 : 用 于 设置 列表 内 容 。 
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> _ub\wwwroot\tg\ch09\9 24 html" 党 日 疯 


图 9-35 ”插入 的 选择 框 


DRequred 


DautoFocws DMultiple 


图 9-36 选择 框 的 “属性 ”面板 


和 Multiple ( 允许 多 选 ): 用 于 设置 是 否 允 许 选择 多 项 列表 值 

和 Selected ( 初始 化 时 选 定 ): 用 于 设置 “列表 | 菜单 ”的 默认 选项 

此 时 预览 页 面 , 会 发 现 选择 框 为 空 , 还 没有 列表 项 。 单 击 “ 属 性 ”面板 上 的 “列表 值 ”按钮 打开 “ 列 
表 值 ”对 话 框 ， 如 图 9-37 所 示 。 在 这 里 可 以 添加 或 修改 列表 项 

站 项 目标 签 : 用 于 设置 列表 项 的 显示 文本 

Y 值 : 用 于 设置 列表 项 选中 时 对 应 的 值 

9 国 和 国 按 钮 : 用 于 添加 和 删除 列表 项 

例如 ,将 选择 框 的 标签 占 位 文本 修改 为 “请 选择 一 个 最 喜欢 的 产品 : ”; 在 “属性 "面板 上 设置 Name( 名 
称 ) 为 product; 单 击 “列表 值 ”按钮 , 各 个 列表 项 的 标签 和 对 应 的 值 如 图 9-38 所 示 。 单 击 “确定 ”按钮 ， 
设置 Selected ( 初始 时 选中 ) 为 Adobe Dreamweaver， 页 面 效果 如 图 9-39 所 示 。 单 击 选择 框 ， 将 弹出 下 
拉 列 表 。 


| 


图 9-37 “列表 值 ”对 话 框 1 图 9-38 “列表 值 ”对 话 框 2 
逢 天 四 广西 - Windows Interet Explorer le £5 - Windows Internet Explorer 
3 ET | 加 Bowe -oJxj[ 国 : 
安 收藏 交 。 | 区 无 5 时 文 档 全 -上 国 -” | 安 BE 
ET 请 生计 次 的 ER Dreamweaver > 
Adobe Dreamweaver 
Microsof FrontPage | 
Allair HomeSite 
陆 计算 机 | 保护 楼 式 : 全 用 三 = 二 ix > | 二 计算 机 | 全 护 楼 式 : 全 肌 入- 想 100% > 


图 9-39 ”插入 选择 框 的 效果 1 
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同样 的 方法 ,在 “属性 ”面板 上 设置 第 二 个 选择 框 的 Size 为 3, 选中 “Multiple ( 允许 多 选 》 复 选 框 ， 
在 浏览 器 中 的 预览 效果 如 图 9-40 (a ) 所 示 。 拖 动 滚动 条 可 以 浏览 选项 ， 按 住 Shift 键 或 Ctrl 键 可 以 选择 
连续 或 不 连续 的 多 个 选项 ， 如 图 9-40 (b ) 所 示 。 


逢 无 本 文员 - Windows Internet Explorer [ES 着 天 5 看 文 和 - Windows ntemet Explorer IE 一 > 二 | 
合同 辣 | cvnepubwwwo。 [t+ [x ||® oeMON seare 
会 必 面 灾 。 | 科 无 于 文 村 从 ~ 园 *“| 


| 
| 
| 
| 


(FIO |@ cvnepubwwmwe ~ [+ [x ||® e 
襄 和 天 | 逢 无 5 要 文本 全 -和 目 -” 


sammeaver 同 | 
IAdobe Fireworks | 
您 经 常 使 用 Adobe 的 哪些 产品 。 -| 


Dreamweaver| 
Adobe Fireworks 


您 经 常 使 用 Adobe 的 哪些 产品 ，。 Adobe Flash 


| 。 峙 计算 | 人 六 模式. 用 从 > Rl00% > | 陵 计算 册 | 保护 模式 本 用 给 太 100% ~ 


(a) (b) 
图 9-40 ”插入 选择 框 的 效果 2 


9.2.5 文件 域 


有 时 候 ， 需 要 访问 者 提供 的 信息 过 于 复杂 ， 无 法 通过 文本 域 上 传 到 服务 器 ， 如 经 过 排版 的 简历 、 图 
形 文 件 或 其 他 文件 。 在 网 页 中 加 入 文件 域 可 以 达到 这 个 目的 ， 前 提 条 件 是 服务 器 支持 文件 匿名 上 传 功能 ， 
且 有 能 处 理 文件 提交 操作 的 页 面 。 此 外 ,文件 域 要 求 使 用 POST 方法 将 文件 从 浏览 器 传输 到 服务 器 。 

切换 到 表单 的 “设计 ”视图 ,在 要 插入 选 择 框 的 位 置 单 击 ,执行 “插入 "| “表单 "| "文件 ”命令 ,或 在 “ 表 
单 ” 插 入 面板 中 单 击 “ 文 件 ” 按 钮 ， 如 图 9-41 所 示 。 即 可 插入 一 个 文件 域 ， 如 图 9-42 所 示 。 


图 9-41 选择 “文件 图 9-42 ”插入 的 文件 域 


“文件 ”控件 的 “属性 ”面板 ， 如 图 9-43 所 示 


cass (TE ) | OMultiple 


ORequired Fom 


图 9-43 “文件 ”控件 的 “属性 ”面板 


外 Name ( 名称 ): 用 于 设置 文件 域 的 名 称 ， 可 以 被 脚本 或 程序 所 引用 。 

外 Multiple ( 多 选 ): 选中 该 选项 后 ， 选 择 文件 时 允许 同时 选择 多 个 文件 。 

例如 ,将 “文件 "控件 的 标签 占 位 文本 修改 为 “个 人 风采 :” ,在 浏览 器 中 的 效果 如 图 9-44 所 示 。 单 击 “ 浏 
览 ” 按 钮 ,将 弹出 “选择 性 加 载 的 文件 ”对 话 框 , 选择 需要 上 传 的 文件 后 , 单 击 “ 打 开 ” 按 钮 , 即 可 在 “ 文 
件 ” 控 件 中 填充 指定 文件 的 路 径 ， 如 图 9-45 所 示 。 
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[Ee 乱 无 奈 要 文告 | 入 ~ 次 收 训 天 。 乱 无 标 要 文档 从 = 
个 人 风采 ， DB] = 个 人 风采 : G:yangDWA 目 录 .pdf [浏览 ..。 ] = 


图 9-44 “文件 ”控件 的 效果 图 9-45 选择 文件 上 传 


9.2.6 按钮 


按钮 对 于 表单 来 说 ， 是 必 不 可 少 的 。 表 单 中 的 按钮 控件 是 用 于 触发 服务 器 端 脚本 处 理 程序 的 工具 。 
只 有 通过 按钮 的 触发 ， 才 能 把 用 户 填写 的 信息 传送 到 服务 器 端 ， 实 现 信息 的 交互 。Dreamweaver CC 2018 
提供 了 三 种 基本 类 型 的 按钮 。 

1. 插入 “提交 ”按钮 

“提交 ”按钮 使 用 POST 方法 将 表单 提交 给 指定 的 动作 进一步 处 理 。 

切换 到 表单 的 “设计 ”视图 , 在 要 插入 按钮 的 位 置 单 击 , 执行 “插入 ”|“ 表 单 ”|“ 提 交 ” 按 钮 命令 ， 
或 在 “表单 ”插入 面板 中 单 击 “ 提 交 ” 按 钮 图 标 , 如 图 9-46 所 示 , 即 可 插入 一 个 “提交 ”按钮 , 如 图 9-47 


所 示 ， 
er 
WE 


最 喜欢 的 栏目 是 : 
语 过 添 情 
道听途说 
音乐 天 堂 
你 好 色彩 


图 9-46 选择 “提交 ”按钮 图 9-47 插入 的 “提交 ”按钮 


“提交 ”按钮 的 “属性 ”面板 ， 如 图 9-48 所 示 


图 9-48 “提交 ”按钮 的 “属性 ”面板 


3 Name ( 名称 ): 用 于 设置 按钮 的 名 称 ， 默 认为 submit。 该 名 称 可 以 被 脚本 或 程序 引 

和 Value ( 值 ): 用 于 设置 按钮 的 标识 ， 该 标识 将 显示 在 按钮 上 ， 默 认为 “提交 ”。 

和 Form No Validate ( 不 验证 ): 提交 表单 时 不 对 form 或 input 域 进行 验证 。 

2. 插入 “ 重 置 ”按钮 

“ 重 置 ”按钮 用 于 把 表单 各 控件 的 值 恢复 到 初始 状态 ， 以 便 重 新 输入 表单 数据 。 

切换 到 表单 的 “设计 ”视图 ,在 要 插入 按钮 的 位 置 单 击 ,执行 “插入 ”|“ 表 单 ”|“ 重 置 ”按钮 命令 ， 
或 在 “表单 ”插入 面板 中 单 击 “ 重 置 ”按钮 图 标 , 如 图 9-49 所 示 , 即 可 插入 一 个 重 置 按钮 , 如 图 9-50 
所 示 。 
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最 喜欢 的 栏目 是 : 
语 过 添 情 
道听途说 
音乐 天 掌 
你 好 色彩 


图 9-49 选择 “ 重 置 ”按钮 图 9-50 插入 的 “ 重 置 ”按钮 


“ 重 置 ”按钮 的 “属性 ”面板 ， 如 图 9-51 所 示 


图 9-51 “ 重 置 ” 按 钮 的 “属性 ”面板 

该 按钮 控件 的 属性 与 “提交 ”按钮 的 属性 基本 相同 ， 不 再 重复 介绍 。 不 同 的 是 Name ( 名 称 ) 属性 的 
值 默 认为 reset，Value ( 值 ) 属性 的 值 默认 为 “ 重 置 

3. 插入 “按钮 ” 

普通 按钮 ( 或 称 无 动作 按钮 ) 在 单 击 时 不 产生 任何 动作 ， 用 户 可 以 为 该 按钮 
指定 要 执行 的 动作 ， 

切换 到 表单 的 “设计 ”视图 ， 在 要 插入 按钮 的 位 置 单 击 ， 执 行 “插入 ”|“ 表 
单 ”| “按钮 ”命令 ,或 在 “表单 ”插入 面板 中 单 击 “ 按 钮 ”图 标 , 如 图 9-52 所 示 ， 
即 可 插入 一 个 普通 按钮 

普通 按钮 的 属性 与 “ 重 置 ”按钮 的 属性 基本 相同 ， 不 同 的 是 Name ( 名 称 ) ”图 952 选择 “按钮 
属性 的 值 默认 为 button，Value ( 值 ) 属性 的 值 默 认为 “提交 ” 


9.2.7 图像 按 钮 


在 表单 中 ,“ 图 像 按 钮 ”不 仅 可 以 替代 “提交 ”按钮 执行 将 表单 数据 提交 给 服务 器 端 程序 的 功能 ， 而 
且 可 以 使 网 页 更 为 美观 

切换 到 表单 的 “设计 ”视图 , 在 要 插入 按钮 的 位 置 单 击 , 执行 “插入 ”|“ 表 单 ”|“ 图 像 按钮 ”命令 ， 
或 在 “表单 ”插入 面板 中 单 击 “ 图 像 按 钮 ”图 标 , 如 图 9-53 所 示 , 即 可 插入 一 个 图 像 按 钮 , 如 图 9-54 所 示 。 


图 9-53 选择 “图 像 按 钮 ” 图 9-54 插入 的 图 像 按钮 
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“图 像 按钮 ”控件 的 “属性 ”面板 ， 如 图 9-55 所 示 。 


Se .fegesjenalpg 加 | 页 Wi 


图 9-55 “图 像 按钮 ”控件 的 “属性 ”面板 


3 Name (名称 ): 用 于 设置 图 像 按钮 的 名 称 ， 可 以 被 脚本 或 程序 引 

Si Src ( 源 文件 ): 用 于 设置 图 像 的 URL 地 址 。 

和 Form Action (动作 ): 用 于 指定 图 像 按钮 的 动作 脚本 文件 

9 Alt (替换 ): 用 于 设置 图 像 的 替换 文字 ， 当 浏览 器 不 显示 图 像 时 ,会 用 输入 的 文字 替换 图 像 。 

“编辑 图 像 ”: 启动 默认 的 图 像 编辑 器 打开 图 像 文 件 进行 编辑 。 

设置 以 上 属性 后 , 图 像 按 钮 还 不 能 实现 “提交 ”按钮 的 功能 , 还 应 指定 图 像 按钮 的 value ( 值 ) 属性 。 
该 属性 不 能 在 “属性 ”面板 上 直接 设置 ， 需 要 在 “代码 ”视图 中 指定 

切换 到 “ 拆 分 ”视图 ， 在 “设计 ”视图 中 单 击 图 像 按钮 ,“ 代 码 ” 视 图 中 相应 的 代码 将 突出 显示 ， 在 
图 像 按钮 代码 中 加 上 value 属性 ， 并 指定 值 ， 此 时 的 图 像 按 钮 代码 如 下 : 


<input name="submit" type="image" id="submit" form="forml" formaction="result.aspx" 
src=",./images/email.jpg"” alt=" 提 交 " value="submit" > 


保存 文档 。 在 浏览 器 中 预览 页 面 ， 单 击 图 像 按钮 将 跳 转 到 指定 的 表单 处 理 页 面 。 
9.2.8 上 机 练习 一 一 制作 个 人 信息 采集 页 面 


生日 标 
通过 以 上 对 基础 知识 的 介绍 ， 结 合 “ 个 人 资料 填写 ”网 页 的 制作 实例 ， 使 读者 掌握 设置 表单 和 各 种 
表单 控件 属性 的 方法 。 
5 设计 思路 
首先 新 建 一 个 空白 的 网 页 文件 ， 在 页 面 中 插入 表单 ， 并 使 用 表格 设计 页 面 布局 ; 然后 在 单元 格 中 插 
人 表单 控件 ， 并 设置 控件 的 属性 ， 最 终 效 果 如 图 9-56 所 示 


条 天 和 时 文本 - Windows Internat Explorer ny" 


tO | 


OO le wa -| 万 -| 
宇宙 天 。 种 无 2 格 i 
国 砂 
个 人 资料 填写 9-1 上 机 练习 一 一 制作 个 人 

re 信息 采集 页 面 
人 性别 。 罗 ee 
密码 : 
学 历 : 想 风 | 
委 好 : 他 一 电影 

高中 

中 专 
备注 由 访 

me 

县 他 

i 


图 9-56 表单 结构 效果 
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(1) 新 建文 件 。 启 动 Dreamweaver CC 2018， 执 行 “ 文 件 ”|“ 新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 
对 话 框 中 ,设置 页 面 类 型 为 HTML ， 无 框架 ， 单 击 “ 创 建 ”按钮 ， 新 建 一 个 空白 的 HIML 文档 。 

(2 ) 设置 标题 属性 。 在 页 面 中 输入 标题 文本 “个 人 资料 填写 " ,选中 文本 ,在 “属性 ”面板 上 的 “格式 ” 
下 拉 列 表 中 选择 h2; 然后 切换 到 CSS 属性 区 域 , 设 置 目标 规则 为 h2 ,颜色 为 红色 ( 考 F0000 ), 且 居中 对 齐 ， 
如 图 9-57 所 示 。 


图 9-57 设置 标题 属性 


(3 ) 插入 表单 。 标 题 文字 下 方 单 击 ， 执 行 “插入 ”|“ 表 单 ”|“ 表 单 ” 命 令 ; 在 属性 面板 上 设置 表单 
ID 为 forml, Action (动作 ) 为 mailto:webmaster@hotmailcom, Method (方法 ) 为 POST, Enctype ( 编码 ) 


为 text/plain。 
(4 ) 插入 表格 排版 。 执 行 “ 插 入 ”| “表格 ” 命令 ,在 表单 内 插入 一 个 7 行 1 列 的 表格 ,宽度 为 400 像素 ， 
“边框 ” 值 为 0， 单 元 格 间距 为 0; 然后 在 “属性 ”面板 上 设置 表格 的 “对 齐 ” 方 式 为 “居中 对 齐 ”。 选 中 


ea 设置 单元 格 高 度 为 40,“ 背 景 颜色 ”为 绿色 (#66CC99 ) ， 单 元 格 内 容 垂 直 对 齐 方式 为 “ 居 
; 选中 第 1 行 至 第 6 行 ， 设置 单元 格 内 容 水 平 “ 左 对 齐 ”， 如 图 9-58 所 示 。 


图 9-58 设置 表格 和 单元 格 的 属性 


(5 ) 插入 文本 域 。 将 指针 放置 在 第 1 行 单元 格 中 ,执行 “插入 ”|“ 表 单 ”|“ 文 本 ”命令 , 插入 
文本 字段 。 选 中 文本 字段 ， 将 标签 占 位 文本 修改 为 “姓名 : ”， 然 后 在 “属性 ”面板 上 设置 Name ( 名 称 ) 
为 name，Size ( 宽度 ) 为 20，Max Length ( 最 多 字符 数 ) 为 20， 关 联 的 表单 为 form1。 

(6 ) 插入 单 选 按钮 。 将 鼠标 指针 放置 在 第 2 行 单元 格 中 ,输入 文本 “性 别 :“, 然 后 执行 “插入 ”|“ 表 
单 ”|“ 单 选 按钮 ”命令 。 选 中 单 选 按钮 , 将 标签 占 位 文本 修改 为 “ 男 ”, 在 “属性 ”面板 上 设置 Name ( 名 
称 ) 为 gender, Value ( 值 ) 为 0, 并 选中 Checked (已 选中 ) 复 选 框 ; 同样 的 方法 , 插入 第 二 个 单 选 按钮 ， 
Name (名称 ) 为 gender, Value ( 值 ) 为 1, 不 选中 Checked (已 选中 ) 复 选 框 , 此 时 的 页 面 效果 如 图 9-59 
所 示 。 

(7 ) 插入 密码 域 。 将 鼠标 指针 放置 在 第 3 行 单元 格 中 ,执行 “插入 ”|“ 表 单 ”|“ 密 码 ” 命 令 。 选 中 
密码 域 , 将 标签 占 位 文本 修改 为 “密码 ”, 在 “属性 ”面板 上 设置 Name ( 名 称 ) 为 password, Size ( 宽度 
为 20，Max Length ( 最 多 字符 数 ) 为 20， 此 时 的 页 面 效果 如 图 9-60 所 示 。 

(8 ) 插 和 人 选择 框 。 将 鼠标 指针 放置 在 第 4 行 单 元 格 中 ， 执 行 “ 插 入 ”|“ 表 单 ”|“ 选 择 ” 命 令 。 选 中 
选择 框 ， 将 标签 占 位 文本 修改 为 “学 历 ”， 在 “属性 ”面板 上 设置 Name ( 名 称 ) 为 edu，Size ( 高 度 ) 为 
1; 单 击 “ 列 表 值 ”按钮 ， 在 弹出 的 “列表 值 ”对 话 框 中 输入 项 目标 签 和 对 应 的 值 ， 单 击 @ 按 钮 ， 可 以 添 
加 选择 项 ， 如 图 9-61 所 示 。 单 击 “确定 ”按钮 ， 页 面 效 果 如 图 9-62 所 示 。 


第 9 章 249 
创建 表单 网 页 


个 人 咨 料 坛 


图 9-59 插入 文本 域 和 单 选 按钮 效果 


图 9-61 “列表 值 ” 对 话 框 图 9-62 ”插入 选择 框 效果 


(9 ) 插入 复 选 框 。 将 鼠标 指针 放置 在 第 5 行 单元 格 中 ， 输 入 文本 “爱好 : "”， 然 后 执行 “插入 ”|“ 表 
单 ”|“ 复 选 框 ”命令 。 选 中 复 选 框 ,将 标签 占 位 文本 修改 为 “音乐 ” ,在 “属性 ”面板 上 设置 Name ( 名 称 ) 
为 music，Value ( 值 ) 为 0， 并 选中 Checked (已 选中 ) 复 选 框 ; 同样 的 方法 ,插入 第 二 个 复 选 框 ， 设 置 
Name ( 名称 ) 为 movie, Value ( 值 ) 为 1, 不 选中 Checked (已 选中 ) 复 选 框 , 此 时 的 页 面 效 果 如 图 9-63 
所 示 。 

(10 ) 插入 文本 区 域 。 将 鼠标 指针 放置 在 第 6 行 单元 格 中 ,执行 “插入 ”|“ 表 单 ”|“ 文 本 区 域 ”命令 。 
选中 文本 区 域 ,将 标签 占 位 文本 修改 为 “备注 ”, 在 “属性 ”面板 上 设置 Name ( 名 称 ) 为 note,Rows ( 行 ) 
为 3，Cols ( 列 ) 为 20， 此 时 的 页 面 效果 如 图 9-64 所 示 


中 隔 本 科 | 


图 9-63 ”插入 复 选 框 效果 图 9-64 插入 文本 区 域 效果 
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(11 ) 拆 分 单元 格 。 将 鼠标 指针 放置 在 第 7 行 单元 格 中 ,在 “属性 ”面板 上 设置 单元 格 内 容 水 平 对 齐 
方式 为 “居中 ”。 然 后 单 击 “ 拆 分 单元 格 ” 按 钮 ,在 弹出 的 “ 拆 分 单元 格 ”对 话 框 中 ,把 单元 格 拆 分 为 “ 列 ”， 
列 数 为 2， 如 图 9-65 所 示 。 

(12 ) 插入 按钮 。 将 鼠标 指针 放置 在 第 1 列 单元 格 中 ,执行 “插入 ”|“ 表 单 ”|“ 提 交 按 钮 ”命令 。 
将 鼠标 指针 放置 在 第 2 列 单元 格 中 ,执行 “插入 ”|“ 表 单 ”|“ 重 置 按钮 ”命令 ,在 “属性 ”面板 上 将 
Value( 值 ) 修改 为 “清空 "， 此 时 的 页 面 效 果 如 图 9-66 所 示 

至 此 ， 页 面 制 作 完成 。 在 浏览 器 中 的 预览 效果 如 图 9-56 所 示 


9.2.9 ”HTMELS 表单 元 素 


Dreamweaver CC 2018 提供 多 个 HTMLS5 表单 元 素 ， 如 日 期 、 时 间 、 电 子 邮件 、 电 话 号 码 、URL、 数 
范围 、 搜 索 等 ， 如 图 9-67 所 示 。 这 些 表单 元 素 提供 了 更 好 的 输入 控制 和 验证 。 


拆 分 单元 者 [一 | 


日 其 

D 时 间 

名 日 期 时 间 
日 其 时 间 (当地 》 


图 9-65 “ 拆 分 单元 格 ” 对 话 框 图 9-66 ”插入 按钮 效果 图 9-67 HTML5 表单 元 素 


各 注意 : 目前 浏览 器 对 HTML5 新 的 输入 类 型 还 没有 完全 支持 ， 不 过 已 经 可 以 在 所 有 主流 的 浏 
览 器 中 使 用 它们 了 。 即 使 不 被 支持 ， 仍 然 可 以 显示 为 常规 的 文本 域 。 


1. 电子 邮件 
E-mail 类 型 用 于 输入 E-mail 地 址 ， 且 在 提交 表单 时 ， 会 自动 验证 电子 邮件 域 的 值 。 在 表单 中 插入 电 
子 邮件 控件 之 后 ， 在 “代码 ”视图 中 可 以 看 到 如 下 所 示 的 代码 : 一 一 一 一 一 一 


<label for="email">Email:</label> 


Email: |123/com| 
npt ET OO! 


上 -= [+ 
器 请 输入 电子 邮件 地 址 。 


<input type="email" name="email" id="email"> 
如 果 在 电子 邮件 控件 中 没有 填写 正确 的 邮件 格式 ， 提 交 表 单 时 会 显示 提 ” 图 9-68 验证 电子 邮件 地 址 
示 说 明 ， 如 图 9-68 所 示 。 
2.URL 
URL 类 型 用 于 填写 URL 地 址 ,在 提交 表单 时 ,会 自动 验证 URL 域 的 值 。 在 表单 中 插入 URL 控件 之 后 ， 
在 “代码 ”视图 中 可 以 看 到 如 下 所 示 的 代码 : 
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<label for="url">Url:</label> 

<input type="url" name="url" id-"url"> 

如 果 在 Ur 控件 中 没有 填写 正确 的 Ur 格式， 提交 表单 时 会 显示 提示 说 明 ， 如 图 9-69 所 示 。 

3. 数字 

Number 类 型 用 于 验证 输入 数值 ， 显 示 为 微调 框 ， 用 户 可 以 指定 数字 的 范围 、 步 长 和 默认 值 。 

如 果 没 有 填写 正确 的 数字 格式 ， 提 交 表单 时 会 显示 提示 说 明 ， 如 图 9-70 所 示 。 

4. 范围 

Range 类 型 用 于 显示 一 定 范围 内 的 数字 ， 显 示 为 滑动 条 ， 如 图 9-71 所 示 。 

竹 |12 
ET TD 
加 请 输入 网 址 。 
图 9-69 难 证 Url 地 址 图 9-70 ”验证 数字 图 9-71 范围 

5. 日 期 选择 器 

在 Dreamweaver CC 2018 中 ，HTML5 拥有 多 个 可 供 选取 日 期 和 时 间 的 输入 类 型 。 

和 9 月 (month ): 用 于 选取 月 、 年 ， 如 图 9-72 所 示 。 

和 周 ( week ): 用 于 选取 周 和 年 ， 如 图 9-73 所 示 。 

和 9 日 期 (date ): 用 于 选取 日 、 月 、 年 ， 如 图 9-74 所 示 。 

[Month |---- 年 -- 月 自 弛 weake [---- 年生 -- Eb we ve 中 
如 | ，| 2015 年 3 月 =|» || 2015 年 3 月 = |» [ele) 2015 年 月” | ,lm 

| 周 | 周 日 周一 周二 周三 局 四 周 五 局 六 | 局 日 周一 周二 周三 周 四 周 五 周 六 | 
[9|2 2 24 25 26 27 28| 22 23 24 25 26 27 28 | 
11 9 1011 1213 4 8 9 10 11 12 13 14| 
12115 16 17 18 19 20 21 15 16 17 18 19 20 21 
13|22 23 24 25 26 27 28 22 23 24 25 26 27 28 
14| 29 303 1 2 3 4 29 30 31 1 2 3 4 | 
本 周 | | 清除 | 今天 || 青 除 


图 9-72 选取 月 图 9-73 选取 周 图 9-74 选取 日 期 


9 时 间 (time ): 使 用 微调 框 选取 时 间 (小 时 和 分 钟 )， 如 图 9-75 所 示 。 
和 9 日 期 时 间 ( datetime ): 用 于 选取 时 间 、 日 、 月 、 年 (UTC 时间 )。 
和 9 日 期 时 间 (当地 ) ( datetime-local ): 用 于 选取 时 间 、 日 、 月 、 年 (本 地 时 间 )， 如 图 9-76 所 示 。 


|DateTime-Locat YYYY/mmy/aa 


«| 20tssoo 有 -加 


图 9-75 ”选取 时 间 图 9-76 日 期 时 间 ( 当地) 
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而 得 高 
6. 颜色 选择 器 
颜色 选择 器 用 于 选取 颜色 ， 显 示 为 下 拉 列 表 ， 如 图 9-77 所 示 。 
7. 搜索 


search 类 型 用 于 搜索 域 ， 比 如 站 点 搜索 。search 域 显示 为 常规 的 文本 域 ， 如 图 9-78 所 示 。 


Search- || 
ssearch +] 


图 9-77 颜色 选择 器 图 9-78 搜索 域 


9.3 ”表单 提交 与 验证 
在 文档 中 创建 表单 及 其 控件 ， 并 不 能 完成 信息 的 交互 。 要 想 在 网 页 中 实现 信息 的 真正 交互 ， 还 必须 
使 用 脚本 或 应 用 程序 来 处 理 相应 的 信息 。 脚 本 或 应 用 程序 由 form 标签 中 的 action 属性 指定 。 此 外 ， 设 置 
表单 的 主要 目的 是 为 了 通过 网 络 收集 到 正确 有 效 的 信息 ， 因 此 ， 在 提交 表单 时 应 进行 一 些 处 理 ， 检 查 表 
单 控件 输入 的 有 效 性 ， 


9.3.1 用 E-mail 提交 表单 


将 整个 表单 制作 完成 后 , 接着 就 是 要 设置 表单 提交 的 位 置 。 一 般 网 站 管理 员 都 会 将 表单 交 由 服务 器 、 
ASP、CGI 或 Perl 等 程序 来 处 理 , 如 果 需 要 完成 的 操作 比较 简单 ， 也 可 以 使 用 JavaScript 脚本 在 客户 端 进 
行 处 理 ， 这 种 方式 对 初学 者 来 说 比较 复杂 。 其 实 ,还 有 一 个 比较 简单 的 方法 , 就 是 利用 E-mail 直接 收集 
浏览 者 填写 的 表单 信息 

选中 整个 表单 ， 在 “属性 ”面板 的 Action (动作 ) 文本 框 中 输入 mailto:e-mail 地 址 ?subject= 主 
题 内 容 ， 例 如 mailto:webmaster@website.com?subject= 网 站 反馈 意见 ; 在 Method (方法 ) 下 拉 列 表 
中 选择 “POST"; 在 Enctype( 编码 ) 文 本 框 中 输入 text/plain, 将 表单 内 容 转 换 为 纯 文字 格式 ,如 图 9-79 
所 示 。 


Cr - 


POST 


黑人 


图 9-79 设置 表单 动作 、 方 法 和 编码 


嫩 注意 : 这 种 提交 表单 的 方式 只 适合 Outlook 用 户 。 收 到 的 E-mail 邮件 中 会 列 出 表单 中 每 一 个 
字段 的 输入 或 者 选择 结果 ， 如 果 没 有 为 表单 控件 指定 合适 的 Name 属性 ， 则 提交 的 信息 就 无 法 一 目 
了 然 。 
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9.3.2 上 机 练习 一 一 验证 必 填 信息 是 否 为 空 


二 穆 习 日 标 


通过 以 上 对 基础 知识 的 介绍 ， 结 合 本 节 练 习 实 例 的 制作 ， 使 读者 熟悉 使 用 ”9-2 上 机 练习 一 一 验证 


wsg 回 
" 


JavaScript 脚本 检查 表单 数据 有 效 性 的 方法 。 必 填 信息 是 否 为 空 
和 设计 思路 


首先 打开 已 制作 好 的 个 人 信息 采集 页 面 ， 然 后 设置 按钮 的 属性 ， 使 用 JavaScript 脚本 检查 表单 数据 
的 有 效 性 ， 最 后 添加 按钮 响应 事件 


户 及 操作 步 机 


(1 ) 打开 文件 。 启 动 Dreamweaver CC 2018， 执 行 “ 文 件 ”| “打开 ” 命 令 ， 在 弹出 的 “打开 ”对 话 
框 中 选择 9.2.8 节制 作 的 表单 网 页 ， 单 击 “ 打 开 ” 按 钮 

在 浏览 器 中 测试 网 页 时 会 发 现 ， 在 表单 中 不 填 任何 数据 ， 或 填 的 数据 无 效 ， 单 击 “ 提 交 ” 按 钮 后 仍 
然 会 发 送 邮件 。 为 了 解决 这 个 问题 ， 可 以 用 JavaScript 脚本 对 表单 控件 的 值 进行 有 效 性 检查 。 

(2) 设置 “提交 按钮 ”的 属性 。 选 中 按钮 ， 在 “属性 ”面板 上 设置 Form Action ( 动作 ) 为 
mailto:webmaster@hotmail.com?subject= 资料 信息 反馈 ，Method ( 方法 ) 为 POST，Enec type ( 编码 ) 为 
textlplain， 关 联 的 表单 为 forml1， 如 图 9-80 所 示 


图 9-80 ”设置 按钮 属性 


(3 ) 添加 脚本 。 在 “设计 ”视图 中 选中 “提交 ”按钮 ， 切 换 到 “代码 ”视图 ， 在 选中 的 代码 后 输入 
以 下 JavaScript 程序 段 : 


<script type="text/javascript"> 
function checkForm(){ 
if(document.forml .name.value==""){ 
alert(" 用 户 名 不 能 为 空 ! "); 
return false; 
} 
if(document .forml.password.value==""){ 
alert(" 密码 不 能 为 空 ! "); 
return false; 
} 


return true; 


1 到 CVnetpub\ wenroot\tg\choo azhamh 


</script> 


如 图 9-81 所 示 。 
(4) 添加 按钮 响应 事件 。 选 中 “提交 ”按钮 对 应 的 代码 ， 添 加 按钮 响应 事件 onclick='retum 
checkForm0:"。 修 改 后 的 代码 如 下 : 


<input name="submit" type="submit" id="submit" form="forml" formaction="mailtoswebmastere 
website.com?subject= 资料 信息 反馈 " formenctype="text/plain" formmethod="POST" onclick="return 
checkForm(); value=" 提交 "> 


(5 ) 保存 文档 ， 至 此 制作 全 部 完成 。 可 以 在 浏览 器 中 打开 页 面 进行 测试 。 


图 9-81 插入 脚本 
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Dreamweayerre: & 


本 例 网 页 的 最 终 功能 有 输入 姓名 和 密码 ， 最 多 可 以 输入 20 个 字符 ; 当 姓 名 和 密码 两 者 中 至 少 有 一 个 
为 空 值 时 ， 单 击 “ 提 交 ” 按 钮 会 弹出 相应 的 错误 提示 对 话 框 ， 如 图 9-82 所 示 ， 并 取消 表单 提交 。 


DO | wa s -| 5|x||® mevov scarh | EE 
训 Ms | 古寺 [ | 全 "- 国 - 口 直 * 
个 人 资料 填写 


清 计算 机 | 保护 模式 : 村 用 种 ~ 蕊 125%6 ~ 省 


BE Windows ntormet Eploree 己 | 回 | 要 
SO ervi 更 -1%|x] 国 Duevovsank 万 


实 0 | 大 FS | | 从" 国 - 口 趾 ~ "| 
个 人 资料 填写 


到 计 其 机 | 人 tP 模 式 : 要 用 入 蕊 125% ”> 


图 9-82 ”出 错 提示 对 话 框 


9.4 ”实例 精 讲 一 一 制作 在 线 订 购 表 单 页 面 


二 和 习 晶 标 


本 实例 制作 一 个 在 线 订购 表单 页 面 ， 通 过 对 该 实例 的 讲解 ， 使 读者 对 表 
单 知识 有 更 加 深入 的 了 解 ， 并 能 够 牢固 掌握 表单 构件 的 属性 设置 方法 。 
9-3 ”实例 精 讲 一 一 制作 在 线 


学 设计 思路 订购 表单 页 面 
首先 打开 一 个 已 创建 好 框架 的 页 面 ， 插 和 表单， 然后 在 表单 中 嵌入 表格 设置 页 面 布局 ， 并 在 各 个 单 
元 格 中 插入 表单 构件 ， 通 过 “属性 ”面板 设置 表单 构件 的 属性 ， 最 终 效果 如 图 9-83 所 示 。 


午餐 1 M-3: 00 


i 


Sy 


© NEW MENU 


记 胡 操 作 步 双 


1. 打开 文件 


晚餐 18，00.24，00 
he Email: 

人 ures 了 = 人 

可 同时 共 300 位 客人 训 矢 

并 可 承办 净 餐 会 及 婚 宣 
茹 二 并 也 

拥有 60 个 以 上 党 车 位 的 训 品 : 门 甜品 。 站 日 昧 料理。 站 传统 小 吃 

nia 胃 电 尖 达 的 时 间 ;11; 30 之 前 

EE ET 
河 ASA FOOD 页 条 单 。 ”关于 我 们 。。 联系 我 们 联系 电 活 : +021-1234-5678 
图 9-83 页 面 最 终 效果 
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启动 Dreamweaver CC 2018， 执 行 “文件 ”|“ 打 开 ” 命 令 ， 在 弹出 的 “打开 ”对 话 框 中 选择 已 设置 
好 页 面 布 局 的 文件 ， 单 击 “ 打 开 ” 按 钮 在 Dreamweaver CC 2018 中 打开 文件 ， 如 图 9-84 所 示 。 


2. 插入 表单 


(1) 插入 表单 域 。 将 鼠标 指针 放 在 右 侧 的 单元 格 中 ， 在 “属性 ”面板 上 设置 单元 格 内 容 垂直 “顶端 ” 
对 齐 ， 然 后 执行 “插入 ”| “表单 ”| “表单 ”命令 ， 插 入 表格 ， 如 图 9-85 所 示 。 


昌 / 提示 : 在 制作 表单 提交 的 页 面 时 应 先 插入 表单 域 ， 否 则 录入 的 表单 信息 将 不 能 提交 。 
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Weer 
Sy 


© NEW MENU 


条 的 全 


和 类 
© uy 上 + 
午餐 11; 00-3: 00 上 % 
哆 篇 18: 00-24: 00 i 
从 全 本 : 二 | 
可 同时 共 300 位 客人 央 人 : i 、 . 
并 可 承办 冷 餐 会 及 婚 究 目 2 Ee y = ]| 
< t 4 汉 
本 3 ~ | 
人 入 车 位 
拥有 c0 个 以 上 注 东 位 


方便 您 眠 车 到 来 


#3 ASA FOOD 主 几 一 训 明基 于 牧人 守 六 我 科 训 电 注 : 区 六 36 咎 


图 9-84 ”打开 的 文件 


图 9-85 插入 表单 域 


(2 ) 设置 表单 属性 。 选 中 插入 的 表单 ， 在 “属性 ”面板 上 设置 动作 ( Action ) 为 mailto:webmaster@ 
website.com?subject=" 送 餐 信息 "， 其 他 保留 默认 设置 ， 如 图 9-86 所 示 。 


图 9-86 设置 表单 属性 
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3. 插入 表格 


将 鼠标 指针 放 在 表单 中 ,执行 “插入 ”|“ 表 格 ” 命 令 ， 在 弹出 的 “表格 ”对 话 框 中 设置 行 数 
为 10， 列 为 2， 宽 度 为 100%， 边 框 粗细 、 单 元 格 边 距 和 单元 格 间 距 均 为 0。 单 击 “ 确 定 ”按钮 插 
入 表格 ， 如 图 9-87 所 示 。 


图 9-87 插入 表格 


4. 设置 表格 布局 

(1 ) 合并 单元 格 。 在 第 1 行 第 1 列 单元 格 中 按 下 鼠标 左 键 向 右 拖 动 ， 选 中 第 1 行 单元 格 ， 然 后 在 
“属性 ”面板 上 单 击 “ 合 并 所 选单 元 格 ” 按 钮 ， 合 并 第 1 行 单元 格 。 同 样 的 方法 ， 合 并 第 2 行 、 第 10 
行 单元 格 。 

(2) 设置 单元 格 高 度 。 将 鼠标 指针 放 在 第 1 行 单元 格 中 ， 在 “属性 ”面板 上 设置 单元 格 
“高 "60。 同 样 的 方法 ,设置 第 10 行 单元 格 高 度 为 60; 第 2 行 至 第 9 行 单元 格 高 度 为 40, 如 图 9-88 
所 示 。 


人 


图 9-88 设置 表格 布局 


5. 插入 图 像 

将 鼠标 指针 放 在 第 1 行 单元 格 中 ,设置 单元 格 内 容 水 平 “ 左 对 齐 ”, 垂 直 “ 顶 端 ”, 然 后 执行 “插入 ”| “图 
像 ” 命 令 , 在 弹出 的 对 话 框 中 选择 需要 的 图 像 ， 如 图 9-89 所 示 。 

6. 插入 文本 

选中 第 2 行 单元 格 , 设置 单元 格 内 容 水 平 “ 左 对 齐 ”; 选中 第 3 行 至 第 9 行 第 1 列 单元 格 , 设置 单元 
格 内 容 水 平 “ 右 对 齐 ”; 选中 第 3 行 至 第 9 行 第 2 列 单元 格 , 设置 单元 格 内 容 水 平 “ 左 对 齐 ”。 然 后 在 第 2 
行 、 第 3 行 至 第 9 行 第 1 列 单元 格 中 输入 文本 ,如 图 9-90 所 示 。 
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图 9-89 插入 图 像 


图 9-90 插入 文本 


7. 插入 文本 域 

将 鼠标 指针 放 在 第 3 行 第 2 列 单元 格 中 ,执行 “插入 ”|“ 表 单 ”|“ 文 本 ”命令 ,插入 一 个 文本 域 。 
删除 文本 域 的 标签 占 位 符 ， 然 后 选中 文本 域 ， 在 “属性 ”面板 上 设置 名 称 (Name ) 为 name, 宽度 ( Size ) 
为 24， 最 多 字符 数 ( MaxLength ) 为 20， 关 联 的 表单 (Form ) 为 form1， 如 图 9-91 所 示 。 

此 时 的 页 面 效果 如 图 9-92 所 示 。 


name Class (无 


Doisabled ” 口 Required DAuto Complete 


口 Auto Focus ” 口 Read Only 


图 9-91 设置 文本 域 属 性 
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图 9-92 插入 文本 域 的 效果 


8. 插入 单 选 按钮 

(1 ) 添加 单 选 按钮 。 将 鼠标 指针 放 在 第 4 行 第 2 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 单 ”|“ 单 选 按钮 ” 
命令 ， 插 入 一 个 单 选 按钮 。 

(2 ) 设置 单 选 按钮 属性 。 删 除 单 选 按钮 的 标签 占 位 文本 ， 然 后 选中 单 选 按钮 ， 在 “属性 ”面板 上 设 
置 名 称 (Name ) 为 gender, 值 (Value ) 为 0， 关联 的 表单 (Form ) 为 forml1， 如 图 9-93 所 示 。 


图 9-93 设置 单 选 按 钮 的 属性 


(3 ) 添加 其 他 单 选 按钮 。 在 第 一 个 单 选 按钮 右 侧 添加 空格 ， 按 照 第 (1 ) 步 和 第 (2 ) 步 的 方法 插入 
第 二 个 单 选 按钮 ， 并 设置 名 称 (Name ) 为 gender, 值 (Value ) 为 1， 关联 的 表单 (Form ) 为 forml。 此 
时 的 页 面 效果 如 图 9-94 所 示 。 


图 9-94 ”添加 单 选 按钮 的 效果 
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9. 添加 E-mail 构件 

将 鼠标 指针 放 在 第 5 行 第 2 列 单元 格 中 ,执行 “插入 ”|“ 表 单 ”|“ 电 子 邮 件 ”命令 ,插入 一 个 电子 
邮件 构件 。 删 除 标签 占 位 文本 ， 然 后 选中 电子 邮件 构件 ， 在 “属性 ”面板 上 设置 名 称 ( Name ) 为 email, 
关联 的 表单 (Form ) 为 forml, 如 图 9-95 所 示 。 


eemall 


Doisabled OR 


口 Auto Foas 口 Read ony 口 


图 9-95 设置 电子 邮件 属性 


此 时 的 页 面 效 果 如 图 9-96 所 示 


f 
j 为 了 能 尽快 联系 到 您 


， 请 认真 填写 如 下 信息 : 


姓名 : 


联系 地 址 : : 
喜欢 的 荣 品 : : YY 


期 望 送 达 的 时 间 : : 


图 9-96 添加 E-mail 构件 效果 


10. 添加 电话 域 

将 鼠标 指针 放 在 第 6 行 第 2 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 单 ”|“Tel” 命 令 ， 插 入 一 个 电话 构件 。 
删除 标签 占 位 文本 ,然后 选中 电话 构件 ,在 “属性 ”面板 上 设置 名 称 (Name ) 为 tel, 选中 “ 必 填 ”( Required ) 
复 选 框 ， 关 联 的 表单 (Form ) 为 fpmml, 如 图 9-97 所 示 


Name tel ass (无 


ODisabled |@Required | 口 Auto Complete | Form foml 


] Auto Focus [DRead Only 


口 
图 9-97 设置 电话 域 的 属性 


此 时 的 页 面 效 果 如 图 9-98 所 示 。 

11. 插入 文本 区 域 

将 鼠标 指针 放 在 第 7 行 第 2 列 单元 格 中 ,执行 “插入 ”|“ 表 单 ”|“ 文 本 区 域 ”命令 。 删 除 标签 占 位 
文本 ,然后 选中 文本 区 域 , 在 “属性 ”面板 上 设置 名 称 (Name ) 为 address, 行 数 (Rows ) 为 5, 列 宽 (Cols) 
为 45， 选 中 “ 必 填 ”( Required ) 复 选 框 ， 关联 的 表单 (Form ) 为 forml, 如 图 9-99 所 示 。 
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address 


abled 


图 9-99 设置 文本 区 域 的 属性 


此 时 的 页 面 效果 如 图 9-100 所 示 。 


图 9-100 ”添加 文本 区 域 的 效果 


12. 添加 复 选 框 

(1 ) 插入 复 选 框 。 将 鼠标 指针 放 在 第 8 行 第 2 列 单元 格 中 , 执行 “插入 ”|“ 表 单 ”|“ 复 选 框 ”命令 ， 
插入 一 个 复 选 框 。 

(2 ) 设置 复 选 框 属性 。 删 除 复 选 框 的 标签 占 位 文本 ， 然 后 选中 复 选 框 ， 在 “属性 ”面板 上 设置 名 称 
(Name ) 为 tianpin, 值 (Value ) 为 1， 关联 的 表单 (Form ) 为 fprml1， 如 图 9-101 所 示 。 
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革 区 民 入 门 哇 语言 


口 cedked 


图 9-101 设置 复 选 框 属性 


(3 ) 添加 其 他 复 选 框 。 按 照 第 (1) 步 和 第 (2 ) 步 的 方法 插入 其 他 两 个 复 选 框 ， 并 分 别 设置 名 称 
(Name) 和 值 (Value)， 此 时 的 页 面 效 果 如 图 9-102 所 示 。 


tS 送 餐 地 址 这 用 


为 了 施 尽 快 联系 到 您 ， 请 认真 壤 写 如 下 信息 : Ne 


加 送 达 的 时 间 : 


图 9-102 ”添加 复 选 框 的 效果 


13. 添加 选择 构件 

(1) 插入 选择 构件 。 将 鼠标 指针 放 在 第 9 行 第 2 列 单 元 格 中 , 执行 “插入 ”|“ 表 单 ”| “选择 ”命令 ， 
插入 一 个 选择 构件 ， 

(2 ) 设置 列表 值 。 在 “属性 ”面板 上 单 击 “ 列 表 值 ”按钮 ， 在 弹出 的 “列表 值 ” 对 话 框 中 添加 列表 
项 和 对 应 的 值 ， 如 图 9-103 所 示 


el 


图 9-103 设置 列表 项 


(3 ) 设置 选择 构件 属性 。 删 除 选择 构件 的 标签 占 位 文本 ， 然 后 在 “属性 ”面板 上 设置 名 称 (Name ) 
为 time, 值 (Value ) 为 1， 选中 “ 必 填 (Required )” 复 选 框 ， 关联 的 表单 (Form ) 为 forml ， 初 始 时 选中 
(Selected ) 第 二 项 ， 如 图 9-104 所 示 。 


9 Required 
OD Multiple 


图 9-104 设置 选择 构件 的 属性 


此 时 的 页 面 效果 如 图 9-105 所 示 。 


” 7 


为 了 能 尽快 联系 到 您 ， 请 认真 增 瑟 如 下 信息 


图 9-105 添加 选择 构件 的 页 面 效果 


14. 添加 按钮 

(1) 插入 “提交 ”按钮 。 将 鼠标 指针 放 在 第 10 行 单元 格 中 ， 设 置 单元 格 内 容 水 平 “ 居 中 对 齐 "， 然 
后 执行 “插入 ”|“ 表 单 ”|“ 提 交 按 钮 ”命令 ， 插 入 一 个 “提交 ”按钮 。 

(2 ) 插入 “ 重 置 ” 按 钮 。 执 行 “ 插 入 ”|“ 表 单 ”|“ 重 置 按钮 ”命令 ， 插 入 一 个 “ 重 置 ”按钮 。 

此 时 的 页 面 效果 如 图 9-106 所 示 。 


* eat 


© NEW MENU 


人 aaa 
第 坟 H 003 oa 


了 


主页 村 章 基于 我 亲王 系 系 线条 


图 9-106 页面 整体 效果 
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15. 保存 文件 
执行 “文件 ”|“ 保 存 ” 命 令 ， 保 存 文件 。 在 浏览 器 中 的 预览 效果 如 图 9-83 所 示 。 


9.5 答疑 解 惑 


1. 在 Dreamweaver CC 2018 中 ， 表 单 和 表格 有 什么 区 别 ? 

答 : 表格 用 于 布局 ， 表 单 用 于 传输 数据 。 可 以 在 表格 中 包含 表单 ， 也 可 以 在 表单 中 包含 表格 。 通 常 
用 表格 来 布局 表单 中 的 数据 ， 但 这 些 数 据 只 有 放 到 一 个 表单 中 ， 才 能 完成 数据 的 提交 。 

2. 表单 中 的 隐藏 域 有 什么 用 处 ? 

答 : 隐藏 域 在 网 页 中 不 显示 ,但 是 可 以 通过 查看 源 代码 显示 ， 通 常用 于 存放 设计 者 不 希望 显示 在 网 
页 中 的 信息 ， 或 在 网 页 之 间 传 递 信息 ， 一 般 用 在 动态 网 页 中 。 

3. 在 表单 中 添加 一 组 单 选 按钮 ， 测 试 时 可 以 同时 选中 多 个 单 选 按钮 ， 而 且 选 中 之 后 不 能 取消 选择 ， 
如 何 处 理 ? 

答 : 读者 一 定 要 记 住 ， 一 组 单 选 按钮 的 名 称 必须 相同 ， 如 果 不 同 ， 就 会 出 现 上 面 的 问题 。 不 考虑 排 
版 方面 的 因素 ， 建 议 初学 者 使 用 单 选 按钮 组 。 

4. 如 何 对 表单 构件 进行 格式 化 ? 

答 : 表单 构件 的 “属性 ”面板 上 没有 可 以 设置 外 观 的 属性 ， 因 此 需要 通过 CSS 样式 修改 表单 构件 的 
外 观 。 例 如 ， 定 义 如 下 的 样式 代码 ， 即 可 设置 ID 为 myBtn 的 按钮 的 宽度 和 按钮 标签 的 外 观 : 


#myBtn{ 
width:100px; 
font-size:20px; 
color:red}; 
} 
9.6 ”学 习 效 果 自 测 
一 、 选 择 题 
1. 下 面 不 能 用 于 输入 文本 的 表单 对 象 是 ( ); 
A. 文 本 域 B. 文本 区 域 C. 密码 域 D. 文件 域 
2. 以 下 应 用 属于 利用 表单 功能 设计 的 有 ( )。 
A. 用 户 注册 B. 浏览 数据 库 记 录 。。”C. 网 上 订购 D. 用 户 登录 
3. 在 表单 元 素 的 “列表 ”的 属性 中 ,，( ) 用 于 设置 列表 显示 的 行 数 。 
A. 类 型 B. 高 度 C. 允许 多 选 D. 列表 值 


4. 对 于 一 个 简单 的 调查 表单 ， 以 下 说 法 正确 的 是 ( » 

A. 表单 的 元 素 必须 使 用 2 个 以 上 

B. 投票 按钮 不 是 一 个 表单 元 素 

C. 调查 表单 只 能 使 用 单 选 按钮 

D. 调查 结果 如 需要 保存 到 数据 库 中 ， 应 实现 建立 一 个 数据 库 链接 
5. 在 表单 中 ， 人 允许 用 户 从 一 组 选项 中 选择 多 个 选项 的 表单 对 象 是 ( 关 

A. 单 选 按钮 B. 选择 框 C. 复 选 框 D. 单 选 按钮 组 
二 、 判 断 题 


1. 在 网 页 中 插入 文本 框 、 单 选 框 、 复 选 框 时 ， 要 先 插入 空白 的 表单 域 。( ) 
2. Src 属性 不 属于 表单 标记 <FORM> 的 属性 。( ) 
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3. 表单 的 执行 不 需要 服务 器 端的 支持 。( ) 
4 . 密码 域 用 于 填写 密码 等 机 密 内 容 ， 填 写 的 内 容 都 将 以 “*” 或 “ 鲁 ” 的 形式 显示 。( 
5. 一 组 复 选 框 的 名 称 必 须 是 相同 的 。( 


三 、 填 空 题 

1.“ 最 多 字符 数 ” 属 性 可 以 设置 文本 域 中 可 输入 的 ( 。 ”) 字数 。 

2. 文本 域 等 表单 对 象 都 必须 插入 到 ( ) 中 ,这样 浏览 器 才能 正确 处 理 其 中 的 数据 。 
3. 一 组 中 的 所 有 单 选 按钮 必须 具有 ( )， 而 且 必 须 包含 不 同 的 ( ) 

4. 表单 的 提交 方法 有 ( ) 和 ( ) 两 种 。 

5. 在 网 页 中 插入 表单 域 ， 在 网 页 编辑 窗口 显示 为 ) 

四 、 操 作 题 

制作 一 个 调查 问卷 表单 。 

五 、 简 答题 


表单 的 处 理 过 程 是 什么 ? 


265 


Se 


行为 是 事件 和 动作 的 组 合 ， 是 一 种 运行 在 浏览 器 中 的 JavaScript 
代码 ， 用 于 浏览 者 与 网 页 本 身 进行 交互 ， 以 多 种 方式 改变 页 面 效 果 或 3 
lf 执行 特定 任务 : 
k Dreamweaver CC 2018 提供 丰富 的 内 置 行为 ， 用 户 利用 简单 直观 : 
lf 的 语句 设置 手段 ， 不 需要 编写 任何 代码 ， 就 可 以 实现 一 些 强大 的 交互 
与 控制 功能 。 用 户 还 可 以 从 Intemet 下 载 一 些 第 三 方 提供 的 行为 插件 ， 
制作 出 更 加 丰富 的 交 } 


全 日 @@@ 


jm 


哺 站 
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10.1 认识 “行为 ”面板 
行为 由 事件 (Event ) 和 该 事件 触发 的 动作 ( Action ) 组 成 。 事 件 通常 由 浏览 器 确定 ， 比 如 页 面 加 载 、 


# 击 鼠标 左 键 、 鼠 标 经 过 等 。 动 作 通常 由 一 段 JavaScript 代码 组 成 ， 通 过 在 网 页 中 执行 这 段 代 码 可 以 执行 
目 应 的 任务 ， 比 如 打开 新 的 浏览 窗口 、 播 放声 音 或 弹出 信息 等 。Dreamweaver CC 2018 提供 很 多 常用 内 
行为 ， 通 过 “行为 ”面板 可 以 很 方便 地 添加 和 控制 行为 。 


执行 “窗口 ”|“ 行 为 ”命令 ， 即 可 打开 “行为 ”面板 ， 如 图 10-1 所 示 。 

Y 国 : 仅 显 示 当 前 选中 元 素 使 用 的 行为 对 应 的 事件 。 

转 : 显示 所 有 事件 。 在 行为 列表 中 按 字母 升序 列 出 可 应 用 于 当前 选中 标签 的 所 有 事件 ， 如 图 10-2 
所 示 。 

根据 所 选 对 象 的 不 同 ， 显 示 的 事件 也 有 所 不 同 。 如 果 未 显示 预期 的 事件 ， 应 检查 是 否 选择 正确 的 网 


页 元 素 或 标签 。 


9 国 : 添加 行为 。 单 击 该 按钮 弹出 行为 列表 ， 包 含 可 以 附加 到 当前 所 选 元 素 的 动作 。 对 当前 不 能 使 
用 的 行为 ， 则 以 灰色 显示 。 


图 10-1 “行为 ”面板 图 10-2 显示 所 有 事件 


y 国 : 删除 当前 选择 的 事件 。 
EC 和 医 梧 : 改变 附加 到 当前 页 面 元 素 的 动作 的 执行 顺序 。 
单个 事件 可 以 触发 多 个 不 同 的 动作 ， 动 作 以 它们 在 “行为 ”面板 中 列 出 的 顺序 依次 发 生 。 通 过 调整 


动作 发 生 的 顺序 ， 可 以 达到 各 种 不 同 的 效果 。 
10.1.1 了 解 事件 与 动作 


利用 行为 实现 用 户 与 网 页 之 间 的 交互 ， 实 质 是 用 户 通过 在 网 页 中 触发 一 定 的 事件 来 引发 一 些 相应 的 


动作 。 


1. 事 件 
所 谓 事件 ， 就 是 浏览 器 响应 访问 者 的 操作 行为 生成 的 消息 ， 指 示 该 页 的 访问 者 执行 某 种 操作 。 例 如 ， 


当 访 问 者 将 鼠标 指针 移动 到 某 个 链接 上 时 ， 浏 览 器 为 该 链接 生成 一 个 OnMouseOver 事件 。 下 面 简要 介绍 
网 页 制作 过 程 中 常用 的 事件 。 


和 onClick: 单 击 页 面 上 某 一 特定 的 元 素 时 触发 。 

和 onDblClick: 双击 页 面 上 某 一 特定 的 元 素 时 触发 。 

和 onError: 浏览 器 在 载 人 页 面 或 图 像 过 程 中 发 生 错误 时 触发 。 
和 onFocus: 将 鼠标 指针 定位 在 指定 的 焦点 时 触发 。 

和 onKeyUp: 按 下 键盘 上 的 一 个 键 ， 在 释放 该 键 时 触发 。 
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和 onKeyDown: 按 下 键盘 上 的 一 个 键 ， 无 论 是 否 释放 该 键 都 会 触发 动作 。 
和 onKeyPress: 按 下 键盘 上 的 一 个 键 ， 然 后 释放 该 键 时 触发 。 该 事件 可 以 看 作 是 onKeyUp 和 
onKeyDown 的 组 合 。 
onLoad: 图 像 或 页 面 载 人 完成 之 后 触发 。 
onMouseDown: 按 下 鼠标 左 键 尚未 释放 时 触发 。 
onMouseOver: 将 鼠标 指针 移 到 指定 元 素 的 范围 时 触发 。 
onMouseOut: 在 鼠标 指针 移出 指定 的 对 象 时 触发 。 
onMouseUp: 按 下 的 鼠标 按钮 被 释放 时 触发 。 
onMouseMove: 在 指定 元 素 上 移动 鼠标 指针 时 触发 。 
onSubmit; 提交 表单 时 触发 。 

和 onUnload: 离开 页 面 时 触发 。 

读者 要 注意 的 是 ， 事件 是 针对 页 面 对 象 或 标签 而 言 的 ， 也 就 是 
说 ， 大 多 数 事件 只 能 用 于 特定 的 页 面 元 素 。 例 如 ， 在 大 多 数 浏览 器 中 ， 
onClick 事件 通常 与 链接 相关 联 ， 而 onLoad 事件 通常 与 图 像 和 文档 的 
body 标签 关联 。 不 同 的 元 素 定 义 了 不 同 的 事件 ， 若 要 查看 给 定 的 页 面 元 
素 及 给 定 的 浏览 器 支持 哪些 事件 ,可 以 选中 页 面 上 的 元 素 , 然后 单 击 “ 行 
为 ”面板 上 的 “显示 所 有 事件 ”按钮 围 ， 如 图 10-3 所 示 用 区 到 区 生 机 让 宁可 用 的 束 全 


[人 


&) 提示 : 在 事件 列表 中 ， 事 件 名 称 前 显示 <A> 的 事件 ( 图 10-3 所 示 ) 仅 用 于 超 链接 。 如 果 
所 选 对象 不 是 超 链接 ,选择 这 些 事件 后 ,Dreamweaver CC 2018 将 自动 为 选 定 元 素 添加 空 链接 ( 在 “ 属 
性 ”面板 上 的 “链接 ”文本 框 中 可 以 看 到 javascript:; )。 


2. 动 作 

动作 由 预先 编写 的 JavaScript 代码 组 成 ， 这 些 代码 执行 特定 的 任务 ， 例 如 打开 浏览 器 窗口 、 显 示 或 
隐藏 元 素 、 检 查 表 单 或 应 用 jQuery 效果 等 。Dreamweaver CC 2018 内 置 的 行为 动作 是 开发 工程 师 精心 编 
写 的 , 它 提供 了 最 大 的 跨 浏览 器 兼容 性 。 例 如 ， 显 示 或 隐藏 元 素 的 动作 由 以 下 代码 实现 ; 


<script type="text/javascript"> 
function MM showHideLayers() { 
var i,pVviobj,args=MM showHideLayers.arguments; 
for (i=0; i<(args.length-2); i+=3) 
with (document) if (getElementById && ((obj=getElementById(args[i]))!=nul1)) { 
v=args[i+2]} 
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v}; } 
obj.visibility=v; } 
由 


</script> 


10.1.2 上 机 练习 一 一 查看 图 像 可 用 的 行为 
10-1 上 机 练习 一 一 查看 


> 红 习 日 标 图 像 可 用 的 行为 
通过 前 面 两 节 对 事件 与 动作 的 介绍 ， 结 合 本 节 练习 ， 掌 握 查看 页 面 元 素 可 用 的 行为 的 方法 。 
和 设计 思路 


首先 选中 页 面 上 的 一 张 图 片 ,然后 打开 “行为 " 面板 , 单 击 “ 添 加 行为 "按钮 , 即 可 查看 图 像 可 用 的 行为 。 
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户 胡 操作 步 邓 


(1) 打开 文件 。 启 动 Dreamweaver CC 2018 ,执行 “文件 ”| “打开 ”命令 ,打开 一 个 包含 图 像 的 网 页 文 
件 ， 如 图 10-4 所 示 。 

(2 ) 查看 行为 。 选 中 网 页 上 的 图 像 ,执行 “窗口 ”| “行为 ”命令 ,打开 “行为 ”面板 。 单 击 “ 添 加 行为 
按钮 ， 弹 出 行为 下 拉 菜 单 ， 如 图 10-5 所 示 。 


调用 JavaScript 
项 等 菜单 


员 竺 学 单 开始 
转 到 URL 
预先 载 入 图 像 


芭 取 更 多 行为.. 


图 10-4 图 像 文件 图 10-5 查看 行为 列表 


从 图 10-5 所 示 的 行为 下 拉 莱 单 中 可 以 查看 可 应 用 到 当前 选中 对 象 的 行为 ， 如 果 行 为 显示 为 灰色 ， 则 
表示 该 行为 不 可 用 于 当前 选中 对 象 。 
10.1.3 ”应 用 行为 
行为 可 以 应 用 到 整个 文档 ( 即 body 标签 )、 链 接 、 图 像 、 表 单元 素 或 其 他 HTML 元 素 , 但 是 不 能 将 


行为 应 用 到 纯 文 本 ,例如 <p> 和 <span> 等 标签 。 应 用 行为 的 操作 步骤 如 下 。 
(1) 在 “设计 ”视图 中 选取 要 应 用 行为 的 页 面 元 素 。 


&) 教 你 一 招 : 若 要 对 文本 应 用 行为 ， 一 个 简单 的 方法 是 为 文本 添加 一 个 空 链接 ( 在“ 链接” 
文本 框 中 输入 javascript:;， 或 直接 键入 一 个 #)， 然 后 应 用 行为 。 使 用 特殊 符号 (#) 的 问题 在 于 ， 
当 访 问 者 单 击 该 链接 时 ， 某 些 浏览 器 可 能 跳 到 页 面 的 顶部 。 而 单 击 JavaScript 空 链 接 不 会 在 页 面 上 
产生 任何 效果 ， 因 此 JavaScript 方法 通常 更 可 取 。 


(2 ) 选择 动作 。 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 国 ， 在 弹出 的 下 拉 菜 单 中 选择 需要 的 动作 ， 
如 图 10-6 所 示 。 对 当前 选中 标签 不 能 使 用 的 动作 以 灰色 显示 。 

行为 的 强大 功能 来 自 于 它 的 灵活 性 。 每 个 动作 都 带 有 一 个 特定 的 对 话 框 ， 用 于 用 户 自 定义 行为 。 

(3 ) 设置 动作 人 参数。 例如， 在 动作 列表 中 选择 “弹出 信息 ”动作 之 后 ， 将 弹出 如 图 10-7 所 示 的 “ 弹 
出 信息 ”对 话 框 。 用 户 可 以 自 定义 要 显示 的 消息 。 

(4 ) 指定 触发 事件 。 单 击 “确定 ”按钮 关闭 参数 设置 对 话 框 。 此 时 ,“ 行 为 ”面板 中 已 列 出 已 应 用 的 
动作 及 默认 的 事件 。 单 击 事件 下 拉 表 单 ， 可 以 从 中 选择 需要 的 触发 事件 ， 如 图 10-8 所 示 。 
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守 区 民 入 门 哇 滞 高 


onBlur 


onGick 
onDblaick 


onEmor 


onUnload 


图 10-6 选择 动作 图 10-7 “弹出 信息 ”对 话 框 图 10-8 选择 事件 


10.1.4 ”修改 行为 


Dreamweaver CC 2018 预 置 的 行为 功能 不 仅 很 强大 ， 而 且 很 灵活 。 在 应 用 行为 之 后 ， 可 以 更 改 触发 
动作 的 事件 、 添 加 或 删除 动作 以 及 更 改动 作 的 参数 
选择 一 个 应 用 行为 的 对 象 ， 执 行 “窗口 ”|“ 行 为 ”命令 打开 “行为 ”面板 ， 按 需要 执行 以 下 
操作 : 
站 编辑 动作 参数 : 在 “行为 ”面板 中 双击 要 重新 编辑 的 动作 名 称 ， 如 图 10-9 所 示 。 然 后 在 弹出 的 参 
数 对 话 框 中 重新 设置 动作 的 参数 
调整 同一 事件 的 多 个 动作 的 执行 顺序 : 选择 某 个 动作 后 单 击 攻 本 或 医 本 按钮 ， 如 图 10-10 所 示 
9 删除 行为 : 选中 动作 后 单 击 “ 删 除 事件 ”按钮 国 | 或 按 Delete 键 ， 如 图 10-11 所 示 。 删 除 事 件 的 同 
时 删除 动作 。 


图 10-9 双击 要 修改 的 动作 图 10-10 ”修改 动作 前 执行 顺序 图 10-11 删除 行为 


10.2 ”内 置 行为 的 应 用 


Dreamweaver CC 2018 为 常见 的 行为 动作 编写 了 代码 ,并 进行 封装 。 用 户 只 需要 简章 
就 可 以 生成 一 些 复杂 的 交互 和 动态 功能 。 添 加 行为 一 般 遵循 三 个 步骤 : 选中 对 象 、 添 加 行 ; 
下 面 简要 介绍 Dreamweaver CC 2018 内 置 行为 的 功能 和 参数 设置 。 
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10.2.1 调用 JavaScript 


“调用 JavaScript” 行 为 允许 用 户 指定 当 发 生 某 个 事件 时 应 该 执行 的 自 定义 函数 或 JavaScript 代码 行 。 
JavaScript 代码 可 以 是 用 户 自己 编写 或 使 用 第 三 方 JavaScript 库 中 提供 的 代码 
选中 要 应 用 行为 的 页 面 元 素 , 并 打开 “行为 "面板 。 单 击 “ 添 加 行为 按钮 ,在 弹出 的 下 拉 菜 单 中 选择 “ 调 
JavaScript” 命 令 ， 弹 出 “调用 JavaScript” 对 话 框 ， 如 图 10-12 所 示 
在 文本 框 中 输入 要 执行 的 代码 , 单 击 “ 确 定 ”按钮 关闭 对 话 框 。 此 时 “行为 ” 面板 显示 如 图 10-13 所 示 。 
Dreamweaver CC 2018 默认 为 该 行为 指定 onClick 事件 ， 即 单 击 鼠 标 时 触发 动作 


调用 JavaScript el 


图 10-12 “调用 JavaScript” 对 话 框 图 10-13 添加 行为 后 的 “行为 ”面板 


例如 ， 为 一 个 按钮 添加 “调用 JavaScript” 行 为 ， 在 “JavaScript: ”文本 框 中 输入 alert (“欢迎 使 用 
Dreamweaver CC 2018 ! ”)， 如 图 10-14 所 示 。 单 击 “ 确 定 ” 按 钮 ， 在 浏览 器 中 预览 时 ， 单 击 按钮 ， 即 
可 弹出 一 个 对 话 框 ， 如 图 10-15 所 示 


ror i 


A Tiareamweaver cc 2018! 


alert( 欢迎 使 用 Dreamweaver CC 2018! 了 


图 10-14 输入 JavaScript 语句 图 10-15 “调用 JavaScript” 行 为 的 效果 


10.2.2 ”弹出 信息 


“弹出 信息 ”行为 显示 一 个 带 有 指定 消息 的 警告 框 。 由 于 警告 框 只 有 一 个 “确定 ”按钮 ， 所 以 使 用 此 
行为 只 能 提供 信息 ， 不 能 提供 选择 

选中 要 应 用 行为 的 页 面 ,并 打开 “行为 ”面板 。 单 击 “ 添 
加 行为 ”按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 “弹出 信息 ”命令 ， 
弹出 “弹出 信息 ”对 话 框 ， 如 图 10-16 所 示 。 在 文本 框 中 输入 
要 显示 的 消息 , 单 击 “确定 ”按钮 关闭 对 话 框 。 然 后 在 “行为 
面板 中 选择 触发 事件 。 

在 网 页 中 设置 弹出 信息 可 以 引起 浏览 者 的 注意 ， 不 过 ， 
不 恰当 或 太 多 的 弹出 信息 往往 适得其反 ,会 引起 浏览 者 的 反 
感 ， 因 此 不 建议 使 用 太 多 的 弹出 信息 。 


弹出 信息 


图 10-16 “弹出 信息 ”对 话 框 
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10.2.3 ”上 机 练习 


二 练习 目标 


显示 图 片 信息 


通过 10.2.2 节 “ 弹 出 信息 ”对 话 框 参数 设置 的 讲解 ， 结 合 本 节 练习 ， 掌 握 10-2 上 机 练习 -显示 
添加 行为 的 操作 方法 ， 熟 悉 “ 弹 出 信息 ”行为 的 功能 。 图 片 信息 
设计 思路 

首先 选中 页 面 中 的 一 张 图 片 ， 然 后 通过 “行为 ”面板 添加 “弹出 信息 ”行为 ， 并 指定 触发 事件 为 


OnMouseOver ( 鼠标 经 过 )。 


所 操作 步 对 


(1) 执行 “文件 "1" 打开 ”命令 ,打开 一 个 已 插入 图 片 的 网 页 。 选 择 页 面 中 要 添加 提示 信息 的 一 张 图 片 ， 
如 图 10-17 所 示 。 然 后 执行 “窗口 ”|“ 行 为 ”命令 打开 “行为 ”面板 。 

(2 ) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 ,在 弹出 的 下 拉 菜单 中 选择 “弹出 信息 ”命令 ,弹出 “ 弹 
出 信息 ”对 话 框 。 

(3 ) 在 “消息 ”文本 域 中 输入 需要 的 消息 。 本 例 输 入 “出 水 芙蓉 "， 如 图 10-18 所 示 。 


sh 人 Vasa 


图 10-17 ”要 添加 行为 的 图 片 图 10-18 “弹出 信息 ”对 话 框 


(4) 单 击 “确定 ”按钮 ， 然 后 在 “行为 ”面板 上 的 事件 下 拉 列 表 中 选择 触发 事件 。 本 例 选 择 
OnMouseOver， 如 图 10-19 所 示 。 

(5 ) 执行 “文件 ” |“ 保存 ”命令 保存 文档 ， 然 后 在 浏览 器 中 预览 效果 。 将 鼠标 指针 移 到 图 片上 时 ， 
将 弹出 一 个 信息 提示 框 ， 如 图 10-20 所 示 。 


图 10-19 设置 触发 行为 图 10-20 “弹出 信息 ”动作 的 效果 


得 ) 提示 :“ 弹 出 信息 ”行为 不 能 控制 JavaScript 警告 的 外 观 ， 这 是 由 访问 者 的 浏览 器 决定 的 。 
如 果 希 望 对 消息 的 外 观 进行 更 多 的 控制 ， 可 以 考虑 使 用 “打开 浏览 器 窗口 ”行为 。 
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单 击 “文档 ”工具 栏 上 的 “代码 ”按钮 ， 切 换 到 “代码 ”视图 ， 可 以 看 到 Dreamweaver CC 2018 自 
动 在 页 面 的 HIML 代码 中 增加 相应 的 JavaScript 代码 和 相关 文件 ， 如 图 10-21 所 示 


全 cvinaipubwmuwootgNunited-Lhimr 


图 10-21 “弹出 信息 ”行为 的 代码 


10.2.4 改变 属性 


“改变 属性 ”行为 可 以 动态 地 改变 指定 对 象 的 属性 值 ， 例 如 Div 标签 的 背景 图 像 或 背景 色 ， 图 像 的 边 
框 和 样式 。 这 些 属 性 的 具体 效果 由 所 使 用 的 浏览 器 决定 

选中 要 添加 行为 的 页 面 元 素 , 在 “行为 ”面板 上 单 击 “ 添 加 行为 ”按钮 ,在 弹出 的 快捷 菜单 中 选择 “ 改 
变 属性 ”命令 ， 弹 出 如 图 10-22 所 示 的 “改变 属性 ”对 话 框 

和 9 元 素 类 型 : 用 于 选择 要 改变 属性 的 对 象 类 型 ， 有 IMG、DIV、SPAN 等 ， 如 图 10-23 所 示 

外 元 素 ID: 设置 了 元 素 类 型 后 ， 该 下 拉 列 表 将 显示 所 有 已 指定 ID 的 指定 类 型 元 素 

外 属性 - 选择 : 选中 此 项 ， 可 以 从 右 侧 的 下 拉 列表 中 选择 一 项 要 改变 的 属性 

9 属性 - 输入 : 选中 此 项 ， 可 以 直接 在 右 侧 的 文本 框 中 输入 要 改变 的 对 象 属性 

9 新 的 值 : 设置 上 一 步 中 指定 属性 的 新 属性 值 


FORM 
INPUT/CHECKBOX 
INPUT/RADIO 
INPUT/TEXT 
TEXTAREA 
INPUT/PASSWORD 
SELECT 


图 10-22 “改变 属性 ”对 话 框 图 10-23 元 素 类 型 


10.2.5 上 机 练习 一 一 单 击 改变 背景 颜色 


< 练习 目标 es 


通过 10.2.4 节 “ 改 变 属性 ”对 话 框 参 数 设置 的 讲解 ， 结 合 本 节 练 习 ， 掌 握 。 10-3 上 机 练习 一 一 单 击 


添加 行为 的 操作 方法 ， 熟 悉 “ 改 变 属性 ”行为 的 功能 。 改变 背 央 颜色 
设计 思路 


首先 选中 页 面 中 一 个 已 命名 的 Div 标签 ， 然 后 通过 “行为 ”面板 添加 “改变 属性 ”行为 ， 设 置 要 修 
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改 的 属性 为 backgroundColor ( 背景 颜色 )， 最 后 指定 触发 事件 为 OnMouseOver ( 鼠标 经 过 ) 


记忆 操作 步 权 
(1) 执行 “文件 ”|“ 打 开 ” 命 令 , 打 开 一 个 已 设置 背景 图 像 的 网 页 文件 。 执 行 “插入 ”|“Div” 
En “插入 Div” 对 话 框 中 输入 标签 的 JP， 本 例 输入 dd， 如 图 10-24 所 示 
rie “插入 Div” 对 话 框 底部 的 “新 建 CSS 规则 ”按钮 ,弹出 “新 建 CSS 规则 ”对 话 框 。 在 “ 选 
A "下拉 列表 中 选择 “标签 ", 在 “选择 器 名 称 " 下 拉 列 表 中 选择 Div, 如 图 10-25 所 示 。 然 后 单 击 “ 确 
or 开 对 应 的 规则 定义 对 话 框 


命令 ， 


Css ez 
Ne ee, i 
计生 轨 名 称 : 
选择 或 输入 选择 器 名 种 。 

i : 

| ET 更 
规 网 守 义 : 

| 和 EXiamiyti 

《 仅 限 该 文档 》 了 pp 

| = 型 可 

图 10-24 “插入 Div” 对 话 杠 图 10-25 “新 建 CSS 规则 ”对 话 框 


(3 ) 在 对 话 框 左 侧 的 分 类 列表 中 选择 “区 块 "， 文本 对 齐 方式 为 “居中 对 齐 ”， 如 图 10-26 所 示 。 然 
后 单 击 “确定 ”按钮 关闭 对 话 框 

(4) ee Div 标签 中 的 占 位 文本 ,输入 “Welcome”。 选 中 输入 的 文本 ,在 属性 面板 上 设置 文本 的 格 
式 为 “标题 1”， 居 中 对 齐 ， 如 图 10-27 所 示 


的 5 项 则 多 


Welcome 


图 10-26 “div 的 CSS 规 则 定义 ”对 话 框 图 10-27 在 Div 标签 中 插入 文字 


(5 ) 在 状态 栏 上 单 击 <div> 标签 ， 然 后 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 ， 从 弹出 的 快捷 菜 
单 中 选择 “改变 有 a 命令 ， 弹 出 “改变 属性 ”对 话 框 。 

(6 ) “元 素 类 型 ”自动 填充 为 DIV,“ 元 素 ID” 自 动 填充 为 DIV "dd", 在 “属性 ”区 域 选中 “选择 ” 
单 选 按钮 ， ed wee a eal 在 “新 的 值 ”文本 框 中 输入 新 的 颜色 值 手 F0， 如 
图 10-28 所 示 。 

(7 ) 单 击 “确定 ”按钮 关闭 对 话 框 ， 在 “行为 ”面板 上 指定 触发 事件 为 onMouseOver 

(8 ) 执行 “文件 ” |“ 保存” 命令 保存 文件 ， 然 后 按 下 F12 键 打开 浏览 器 进行 测试 。 在 浏览 器 中 将 鼠 
标 指针 移 到 “Welcome” 上 时 ， 指 定 的 DIV 元 素 背 景 将 变 为 黄色 ( 考 F0 )， 效 果 如 图 10-29 所 示 。 
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Welcome 


图 10-28 “改变 属性 ”对 话 框 图 10-29 ”改变 属性 后 的 效果 


10.2.6 ”检查 插件 


“检查 插件 ”行为 用 于 根据 浏览 器 安装 插件 的 情况 打开 指定 的 网 页 。 如 果 在 网 页 中 使 用 某 些 插件 ， 如 
Flash、Windows Media Player 等 ， 应 通过 “检查 插件 ”行为 检查 用 户 的 浏览 器 中 是 否 安 装 这 些 插件 。 如 
果 安 装 了 ， 则 跳 转 到 指定 的 网 页 ; 如 果 没 有 安装 ， 则 不 进行 跳 转 或 跳 转 到 另 一 个 网 页 。 如 果 不 进 行 检查 ， 
当 用 户 没有 安装 这 些 插件 时 就 无 法 浏览 网 页 中 的 相关 内 容 

选择 一 个 对 象 并 打开 “行为 ”面板 ， 单 击 “ 添 加 行为 ”按钮 ， 在 弹出 的 快捷 菜单 中 选择 “检查 插件 ” 
命令 ， 弹 出 “检查 插件 ”对 话 框 ， 如 图 10-30 所 示 


图 10-30 “检查 插件 ”对 话 框 


9 插件 - 选择 : 选中 此 项 ， 可 以 从 右 侧 的 插件 下 拉 列 表 中 选择 一 种 插件 

9 插件 - 输入 : 选中 此 项 ， 可 以 直接 在 文本 框 中 输入 插件 的 类 型 ， 类 型 只 能 是 Flash 、Shockwave、 
LiveAudio、Windows Media Player 、QuickTime 等 五 种 类 型 插件 中 的 一 种 ， 

外 如 果 有 ， 转 到 URL: 如 果 找 到 指定 的 插件 类 型 ， 则 跳 转 到 右 侧 文本 框 中 指定 的 网 页 

Y 否则 ， 转 到 URL: 如 果 没 有 找到 指定 的 插件 类 型 ， 则 跳 转 到 右 侧 文本 框 中 指定 的 网 页 。 如 果 和 希望 
没有 安装 该 插件 的 访问 者 留 在 当前 页 上 ， 可 将 此 域 留 空 

和 如 果 无 法 检测 ， 则 始终 转 到 第 一 个 URL: 选择 该 项 后 ， 如 果 不 能 检查 插件 ， 则 跳 转 到 第 一 个 
URL 地 址 指定 的 网 页 


注意 :“ 检 查 插件 ”行为 仅 适用 于 在 Windows 的 Internet Explorer 中 检测 指定 的 插件 。Mac 
OS 上 的 Intemet Explorer 中 不 能 实现 插件 检测 。 
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10.2.7 jQuery 效果 


jQuery 是 一 个 优秀 的 、 轻 量 级 的 JavaScript 框架 ， 其 宗旨 是 一 一 WRITE LESS.DO MORE ( 写 更 少 的 
代码 ， 做 更 多 的 事情 )， 它 兼容 CSS3 ， 还 兼容 各 种 浏览 器 (IE 6.0+，FF 1.5+, Safari 2.0+，Opera 9.0+ )。 

Dreamweaver CC 2018 内 置 十 二 种 精美 的 jQuery 效果 ， 如 图 10-31 所 示 。 可 直接 应 用 于 HIML 页 面 
上 几乎 所 有 的 元 素 ， 轻 松 地 为 页 面 元 素 添加 视觉 过 渡 。 由 于 这 些 效果 都 基于 jQuery， 因此 当 用 户 单 击 应 


了 效果 的 对 象 时 ， 只 有 单 击 的 对 象 会 进行 动态 更 新 ， 而 不 会 刷新 整个 HTML 页 面 ， 


如 果 要 对 某 个 元 素 应 用 效果 ， 该 元 素 必须 处 于 选 定 状态 ,或 者 具有 一 个 有 效 的 色 。 
3 Bounce (反弹 ): 模拟 弹跳 效果 ， 向上、 向 下 、 向 左 、 向 右 跳动 来 隐藏 或 显示 元 素 。 参 数 设置 对 


话 框 如 图 10-32 所 示 。 


Blind Bounce 
Bounce 
clip 


Drop 
Fade 
调用 JavaScript Fold 


EE Highlight 
跳 转 茶 单 开始 Puff 
转 到 URL Pulsate 
预先 戏 和 图 从 Scale 
二 下 更 多 行为 - Eee 
Slide 
10-31 选择 jQuery 效果 10-32 ”Bounce 效果 的 参数 设置 对 话 框 


si 目标 元 素 : 选择 要 应 用 效果 的 对 象 人 D。 目 标 元 素 可 以 与 最 初 选 择 的 元 素 相同 ， 也 可 以 是 页 面 


上 的 其 他 元 素 ， 
Si 效果 持续 时 间 : 指定 效果 持续 的 时 间 ， 默 认为 1000ms。 


Si 可 见 性 : 指定 对 象 应 用 效果 后 的 最 终 状 态 : 隐藏 、 显 示 或 在 隐藏 与 显示 之 间 切 换 。 最 后 一 次 或 


第 一 次 反弹 会 呈现 淡 入 /淡出 的 效果 。 
全 方向 : 指定 弹跳 的 方向 。 
gs 距离 : 指定 弹跳 的 最 大 位 移 。 
3 次 : 设置 弹跳 的 次 数 。 
Blind ( 百叶窗 ): 采用 “ 拉 百 叶 窗 ”的 效果 来 显示 或 隐藏 元 素 。 
Clip (剪辑 ): 通过 垂直 或 水 平方 向 夹 剪 元 素来 隐藏 或 显示 元 素 。 
Drop ( 降落 ): 通过 单个 方向 滑动 的 淡 入 淡出 来 隐藏 或 显示 一 个 元 素 。 
Fade ( 淡 入 | 淡出 ): 使 元 素 显 示 或 渐 隐 。 
Fold ( 折 释 ): 模拟 百叶 窗 效 果 ， 向 上 或 向 下 折 倒 来 隐藏 或 显示 元 素 。 


ieee 


S 水 平 优先 : 指定 折 双 时 是 否 先进 行 水 平方 向 的 折 琶 。 读 者 要 注意 ， 


顺序 相反 。 
S 大 小 : 设置 被 折 秋 元素 的 尺寸 。 
和 Highlight ( 高 亮 ): 更 改元 素 的 背景 颜色 。 


显示 的 时 候 与 隐藏 的 时 候 
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Si 颜色 : 设置 高 亮 显 示 的 颜色 。 
和 Puff ( 膨胀 ): 通过 在 缩放 元 素 的 同时 隐藏 元 素 创建 膨胀 特效 。 
和 Pulsate ( 跳动 ): 通过 跳动 来 隐 显示 元 素 
和 Scale (缩放 ): 使 元 素 变 大 或 变 小 。 参 数 设置 对 话 框 如 图 10-33 所 示 


Scale C2 


图 10-33 ”Scale 效果 的 参数 设置 对 话 框 


gS 方向: 指定 特效 的 方向 
S 原点 X 和 原点 立 : 指定 缩放 中 心 点 
S 百分比 : 设置 指定 对 象 要 缩放 的 百分比 
S 小 数位 数 : 设置 元 被 调整 尺寸 的 区 域 。box 表示 调整 元 素 的 边框 和 内 边 距 的 尺寸 ; content 
表示 调整 元 素 内 所 有 内 容 的 尺寸 
和 Shake (振动 ): 在 垂直 或 水 平方 向 上 多 次 振动 元 素 
9 方向 : 指定 元 素 沿 轴线 移动 第 一 步 时 的 方向 
gs 距离 : 指定 移动 的 位 移 
gs 次 : 设置 振动 的 次 数 
和 Slide (滑动 ); 向 上 、 向 下 、 向 左 或 向 右 移动 元 素 ， 以 显示 或 隐藏 元 素 


于 注意 : 应 用 jQuery 效果 后 ， 系 统 会 在 “代码 ”视图 中 将 对 应 的 代码 行 添加 到 文件 中 。 其 中 
的 两 行 代码 用 来 标识 实现 jQuery 效果 所 需 的 依赖 文件 jquery-1.11.1.min.js 和 jquery-ui-effects.custom. 
minjs， 如 图 10-34 所 示 。 不 能 从 代码 中 删除 该 行 ， 否 则 这 些 效果 将 不 起 作用 。 


-CNinetpub\wwwrootvtgNUntitied-Lhtml* 


源 代码 jgusery-LILLmns jm 


图 10-34 引用 外 部 依赖 文件 


与 其 他 行为 一 样 ， 可 以 将 多 个 效果 与 同一 个 对 象 相关 联 ， 以 产生 奇妙 的 效果 。 设 置 了 多 重 效果 后 ， 
这 些 效果 按照 在 “行为 ”面板 中 的 显示 顺序 依次 执行 。 
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革 刘 这 入 门 叶 语言 


10.2.8 ”上 机 练习 一 一 跳动 的 小 鱼 


< 夭 习 目标 昌 
通过 10.2.7 节 对 jQuery 效果 参数 的 讲解 ， 结 合 本 节 练 习 ， 熟 悉 各 类 jQuery ”10-4 上 机 练习 一 一 跳动 
效果 的 参数 含义 ， 掌 握 为 页 面 元 素 添 加 jQuery 效果 的 方法 。 的 水 鱼 
和 设计 思路 
首先 选中 页 面 中 一 个 已 命名 的 图 像 ， 然 后 通过 “行为 ”面板 添加 “反弹 ”( Bounce ) 效果 ， 并 设置 效 
果 参 数 ， 最 后 指定 触发 事件 为 OnClick ( 鼠标 单 击 ) 


户 衣 操作 步骤 

1. 选中 要 添加 效果 的 页 面 元 素 

执行 “文件 ” |“ 打开” 命令 ， 打 开 要 添加 效果 的 网 页 ， 然 后 选中 页 面 上 要 添加 效果 的 页 面 元 素 ， 如 
图 10-35 所 示 。 

2. 设置 元 素 ID 

打开 “属性 ”面板 , 在 “ID” 文 本 框 中 输入 fish， 如 图 10-36 所 示 


图 10-35 ”要 添加 效果 的 页 面 元 素 图 10-36 ”设置 元 素 ID 


3. 添加 行为 

打开 “行为 ”面板 , 单 击 “ 添 加 行为 ”按钮 图 ,在 弹出 的 下 拉 菜 单 中 选择 “效果 ”|“ 反 弹 ”( Bounce )， 
如 图 10-37 所 示 ， 弹 出 “反弹 (Bounce )” 对 话 框 

4. 设置 效果 参数 ( 如 图 10-38 所 示 ) 


交 培 图像 
弹出 信息 


依 复 交 霹 图 像 
打开 浏览 起 客 口 
拖 动 Ap 元 素 
改变 属性 
»| Blind | 

i Ce | [ee = 
愉 埋 活 件 cp 
性 埋 表单 Drop 
设置 文本 ») Fade 
调用 JavaScript Fold 

Highlight 

和 Puff 

转 到 URL Pulsate 
预先 载 入 图 像 Scale 
区 取 更 多 行为 Sb 

Slide 


图 10-37 ”选择 效果 图 10-38 ”设置 效果 参数 
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(1) 在 “目标 元 素 ” 下 拉 列 表 中 选择 要 应 用 效果 的 对 象 的 一 ， 本 例 选 择 img “fish”。 如 果 已 经 选中 
了 页 面 上 的 图 像 ， 可 以 保留 默认 选项 “< 当前 选 定 内 容 >” 

(2 ) 在 “效果 持续 时 间 ” 文本 框 中 指定 效果 持续 的 时 间 , 单 位 为 毫秒 。 本 例 保留 默认 设置 ,1000 毫秒 。 

(3 ) 在 “可 见 性 ”下拉 列表 中 选择 对 象 应 用 效果 后 的 显示 状态 。 本 例 选择 “隐藏 *( hide ), 即 应 用 效果 后 ， 
在 页 面 上 隐藏 。 

(4) 在 “方向 ”下 拉 列 表 中 选择 元 素 反弹 的 方式 , 可 以 是 向 上 、 向 下 、 向 左 、 向 右 。 本 例 选 择 “向 上 ” 
(up )。 

(5 ) 在 “距离 ”文本 框 中 指定 反弹 的 最 大 位 移 ， 本 例 设置 为 60 像素 

(6 ) 在 “次 ”文本 框 中 指定 反弹 次 数 ， 本 例 输入 5。 

5. 设置 触发 事件 
单 击 “ 确 定 ”按钮 关闭 对 话 框 ，Dreamweaver CC 2018 默认 将 jQuery 效果 的 触发 事件 指定 为 OnClick 
事件 ， 如 图 10-39 所 示 

6. 保存 文件 并 预览 

(1 ) 复制 相关 文件 。 执 行 “ 文 件 ”|“ 保 存 ” 命 令 ， 弹 出 如 图 10-40 所 示 的 “复制 相关 文件 ”对 话 框 。 
单 击 “确定 ”按钮 关闭 对 话 框 ， 在 弹出 的 对 话 框 中 输入 文件 名 称 ， 然 后 单 击 “ 保 存 ” 按 钮 


复制 但 关 文件 Ex 


图 10-39 设置 触发 事件 图 10-40 “复制 相关 文件 ”对 话 框 


(2 ) 预览 效果 。 在 浏览 器 中 打开 保存 的 网 页 ， 点 击 添加 了 效果 的 图 片 ， 图 片 在 页 面 上 向 上 反弹 五 次 ， 
且 一 次 比 一 次 高 ， 最 后 一 次 弹跳 到 60 像素 ， 然 后 在 页 面 上 消失 


10.2.9 ” 转 到 URL 


“ 转 到 URL” 行为 用 于 设置 网 页 满足 特定 的 触发 事件 时 ， 跳 转 到 指定 的 网 页 
选择 一 个 对 象 并 打开 “行为 " 面板 , 单 击 “ 添 加 行为 "按钮 ,在 弹出 的 快捷 菜单 中 选择 “ 转 到 URL" 命令 ， 
弹出 “ 转 到 URL” 对 话 框 ， 如 图 10-41 所 示 


图 10-41 “ 转 到 URL” 对 话 框 
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革 刘 避 入 门 吐 滞 襄 


打开 在 : 在 这 里 可 以 选择 网 页 打开 的 窗口 。 
默认 窗口 为 浏览 器 的 主 窗口 。 若 正在 编辑 的 网 页 中 使 用 了 浮动 帧 框架 IFrame， 即 有 多 个 窗口 ， 则 每 
个 窗口 的 名 称 都 将 显示 在 “打开 在 ”列表 框 中 。 


辣 注意 : 如 果 将 框架 命名 为 top、blank、self 或 parent， 浏 览 器 可 能 会 将 这 些 名 称 误 认为 保留 
的 目标 名 称 ， 从 而 产生 意 想 不 到 的 结果 。 


外 URL: 指定 要 打开 的 网 页 地 址 。 
10.2.10 ”打开 浏览 器 窗口 


使 用 “打开 浏览 器 窗口 ”行为 在 打开 当前 网 页 的 同时 ， 还 可 以 再 打开 一 个 新 的 窗口 。 同 时 ， 还 可 以 
编辑 浏览 窗口 的 大 小 、 名 称 、 状 态 栏 、 菜 单 栏 等 属性 

选择 一 个 对 象 并 打开 “行为 "面板 , 单 击 “ 添 加 行为 "按钮 ,在 弹出 的 快捷 菜单 中 选择 “打开 浏览 器 窗口 ” 
命令 ， 弹 出 “打开 浏览 器 窗口 ”对 话 框 ， 如 图 10-42 所 示 


打开 N 攻 问 窗 吕 | 


图 10-42 “打开 浏览 器 窗口 ”对 话 框 


YM 要 显示 的 URL: 指定 在 打开 的 浏览 器 窗口 中 显示 的 网 页 地 址 

站 窗口 宽度 : 设置 打开 的 浏览 器 窗口 的 宽度 

站 窗口 高 度 : 设置 打开 的 浏览 器 窗口 的 高 度 

9 属性 : 设置 打开 的 浏览 器 窗口 包含 的 显示 属性 ， 可 以 选中 其 中 的 一 个 或 多 个 显示 特性 

Y 窗口 名 称 : 指定 打开 的 浏览 器 窗口 的 名 称 ， 该 名 称 将 显示 在 浏览 器 的 标题 栏 上 
10.2.11 ”预先 载 人 图 像 

“预先 载 和 人 图像” 行为 将 不 能 立即 显示 在 页 面 上 的 图 像 预先 载 人 到 浏览 器 缓存 中 ， 可 以 使 网 页 上 图 像 
的 下 载 时 间 明 显 缩短 ， 有 效 地 防止 由 于 下 载 速度 导致 的 图 像 显 示 延 迟 

选择 一 个 对 象 并 打开 “行为 ” 面板 , 单 击 “ 添 加 行为 ” 按钮 ,在 弹出 的 快捷 菜单 中 选择 “预先 载 入 图像” 
命令 ,弹出 “预先 载 入 图像” 对 话 框 ， 如 图 10-43 所 示 


预先 束 入 图 像 


图 10-43 “预先 载 入 图 和 像 ” 对 话 框 
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和 图 像 源 文件 : 用 于 选择 要 预先 载 人 的 图 像 文 件 。 
外 国 :“ 添 加 项 ”按钮 ， 用 于 将 图 像 添加 到 “预先 载 人 图 像 ”列表 中 。 


得/ 提示 : 如 果 在 添加 下 一 个 图 像 之 前 没有 单 击 “添加 项 ”按钮 , 则 列表 中 选中 的 图 像 将 被 “图 
像 源 文件 ”文本 框 中 指定 的 图 像 蔡 换 。 


3 力 :“ 删 除 项 ”按钮 ， 用 于 从 “预先 载 人 图 像 ”列表 中 删除 选中 的 图 像 。 
10.2.12 ”交换 图 像 / 恢复 交换 图 像 


“交换 图 像 ” 行 为 通过 更 改 <img> 标签 的 src 属性 ， 将 一 个 图 像 与 另 一 个 图 像 进行 交换 。 使 用 “交换 
图 像 ”行为 之 后 ， 系 统 将 默认 为 指定 的 元 素 添加 “恢复 交换 图 像 ”行为 。 

选择 一 个 图 像 对 象 并 打开 “行为 ”面板 , 单 击 “ 添 加 行为 "按钮 ,在 弹出 的 快捷 菜单 中 选择 “交换 图 像 ” 
命令 ， 弹 出 “交换 图 像 ”对 话 框 ， 如 图 10-44 所 示 。 

图 像 : 该 列表 框 显示 当前 文档 窗口 中 所 有 的 图 像 名 ， 可 以 从 该 列表 中 选择 一 幅 图 像 进行 图 像 

和 设 定 原始 档 为 : 指定 替换 图 像 


吕 注意 ; 由 于 只 有 sre 属性 受 此 行为 的 影响 ， 所 以 应 该 换 入 一 个 与 原 图 像 尺寸 (高度 和 宽度 ) 


相同 的 图 像 。 否 则 换 入 的 图 像 显 示 时 会 被 压缩 或 扩展 ， 以 适应 原 图 像 的 尺寸 。 


站 预先 载 人 图 像 : 预先 将 “图 像 ”列表 框 中 高 亮 显 示 的 图 像 加 载 到 浏览 器 的 缓冲 区 。 
9 鼠标 滑 开 时 恢复 图 像 : 将 鼠标 从 图 像 上 移 开 后 ， 显 示 原 图 像 ， 也 就 是 添加 “恢复 交换 图 像 ” 行 为 ， 
触发 事件 为 onMouseOut， 如 图 10-45 所 示 。 


交接 加 像 E> 


图 10-44 “交换 图 像 ” 对 话 杠 图 10-45 添加 “恢复 交换 图 和 像 ”行为 


10.2.13 ”上 机 练习 一 一 制作 产品 展示 页 面 


> 练习 日 标 和 
通过 10.2.12 节 对 交换 图 像 行为 参数 的 讲解 ， 结 合 本 节 练习 ， 掌 握 交互 图 像 ”10-5 上 机 练习 一 制作 
行为 各 项 参数 的 意义 ， 以 及 添加 行为 的 方法 。 产品 展示 页 面 
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写 设计 思路 
首先 选中 页 面 中 一 个 已 命名 的 图 像 ,然后 通过 “行为 ”面板 添加 “交换 图 
最 后 指定 触发 事件 ， 最 终 效果 如 图 10-46 所 示 。 


像 ”行为 ,并 设置 行为 的 参数 ， 


图 10-46 ”交换 图 像 效 果 


操作 步 要 


1. 打开 文件 
执行 “文件 ” |“ 打开” 命令， 打开 一 个 要 添加 行为 的 网 页 文件 ， 如 图 10-47 所 示 。 


2. 设置 图 像 ID 
选中 页 面 顶部 的 第 一 张 图 ， 在 “属性 ”面板 上 设置 ID 为 detail， 如 图 10-48 所 示 。 同 样 的 方法 ， 依 


次 将 其 他 四 张 图 的 ID 分 别 设置 为 picl 、pic2 、pic3 和 pic4。 


图 10-48 设置 图 像 ID 


图 10-47 打开 的 文件 


3. 添加 交换 图 像 行为 

(1 ) 选中 图 像 pic2 ,打开 “行为 ”面板 , 单 击 “ 添 加 行为 ”按钮 ,在 弹出 的 下 拉 菜 单 中 选择 “交换 图 像 ” 
行为 ， 弹 出 “交换 图 像 ”对 话 框 。 

(2 ) 在 “图 像 ”列表 中 选中 图 像 “detail”， 表 示 交 换 图 像 行 为 触发 后 ， 将 交换 ID 为 detail 的 图 像 。 

(3 ) 单 击 “ 浏 览 ”按钮 ， 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选择 pic2 的 详 图 ， 如 图 10-49 所 示 。 

(4) 在 “交换 图 像 ”对 话 框 中 单 击 “ 确 定 ”按钮 关闭 对 话 框 。 

此 时 ， 在 “行为 ”面板 上 可 以 看 到 ，Dreamweaver CC 2018 已 自动 添加 了 恢复 交换 图 像 行为 ， 并 为 
行为 分 别 指定 触发 事件 为 onMouseOver 和 onMouseOut， 如 图 10-50 所 示 。 

在 浏览 器 中 预览 网 页 ， 将 鼠标 指针 移 到 图 像 pic2 上 时 ， 页 面 顶端 的 图 像 将 蔡 换 为 该 图 像 的 详 图 ， 效 


果 如 图 10-51 所 示 ; 移 开 鼠 标 指针 ， 则 人 恢复 为 原 图 。 
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图 10-49 设置 “交换 图 像 ”对 话 框 图 10-50 ”指定 触发 事件 图 10-51 ”交换 图 像 的 效果 


5 ) 重复 第 (1 ) 步 到 第 (4 ) 步 的 操作 ， 分 别 为 pic3 和 pic4 添加 交换 图 像 行为 。 

4. 保存 文件 

执行 “文件 ” |“ 保存” 命令 保存 文件 ， 在 浏览 器 中 的 预览 效果 如 图 10-46 所 示 。 
10.2.14 ”设置 文本 

“设置 文本 ”行为 可 以 设置 容器 ,状态 栏 文本 域 中 的 内 容 , 在 用 适当 的 触发 事件 触发 后 显示 新 的 内 容 

选择 一 个 网 页 元 素 并 打开 “行为 ” 面板 , 单 击 “ 添 加 行为 ” 按钮 ,在 弹出 的 快捷 菜单 中 选择 “设置 文本 ” 
命令 ， 弹 出 如 图 10-52 所 示 的 子 菜单 ， 分 别 对 应 三 种 切换 方式 。 

1. 设置 容器 的 文本 

容器 是 指 可 以 包含 文本 或 其 他 元 素 的 任何 元 素 ， 如 div、p、iframe 等 标签 。“ 设 置 容器 的 文本 ”行为 


用 于 设置 页 面 上 容器 的 内 容 和 格式 进行 动态 变化 ， 但 保 名 容器 的 属性 ( 包括 颜色 )。 “设置 容器 的 文本 ” 
对 话 框 ， 如 图 10-53 所 示 。 


图 10-52 “设置 文本 ” 子 菜单 图 10-53 “设置 容器 的 文本 ”对 话 杠 


容器 : 用 于 指定 内 容 进行 动态 变化 的 容器 。 
和 新 建 HTML: 用 于 设置 容器 中 要 显示 的 内 容 。 可 以 输入 任何 有 效 的 HTML 语句 、JavaScript 函数 
调用 、 属 性 、 全 局 变量 或 其 他 表达 式 ， 这 些 内 容 将 替换 该 容器 中 原 有 的 内 容 。 


晶 / 提示 : 如 果 要 嵌入 一 个 JavaScript 表达 式 ， 应 将 表达 式 放置 在 大 括号 ( {) ) 中 ， 例 如 
{alert(" 机 桃红 了 ! "jj。 若 要 显示 大 括号 ， 则 在 它 前 面 加 一 个 反 斜 枉 〔\f )。 这 个 规则 同样 适用 于 其 
他 两 种 文本 类 动作 。 


例如 ， 选 中 一 幅 图 像 添加 “设置 容器 的 文本 ”行为 ,设置 容器 为 页 面 中 的 一 个 Div 标签 ， 在 “新 建 
HTML" 文 本 框 中 输入 <font size="20" color="red">Happy New Year!</font> , 单 击 “确定 "按钮 关闭 对 话 框 后 ， 
设置 触发 事件 为 onMouseOver。 则 在 浏览 器 中 将 鼠标 指针 移 到 图 像 上 时 ， 对 应 的 Div 标签 中 将 以 指定 的 
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大 小 和 颜色 显示 指定 的 文本 ， 如 图 10-54 所 示 。 
2. 设置 文本 域 文字 
“设置 文本 域 文字 ”行为 用 于 改变 指定 文本 域 的 显示 内 容 。 使 用 本 行为 之 前 必须 先 插 和 人 文本 域 对 象 。 
“设置 文本 域 文字 ”对 话 框 如 图 10-55 所 示 。 


个 无 标题 文档 - Windows Internet Explorer ED) 


OO | 居 cinetpubwwwro ~ 全 |X || 团 D4EMON se， 
裕 收 茂 交 | 咎 无 标量 文 村 全 ~- 目 - 


Happy New Year! 


画 计算 机 | 保护 模式 : 禁用 给 拒 100%6 ~ 


图 10-54 “设置 容器 的 文本 ”行为 的 效果 图 10-55 “设置 文本 域 文字 ”对 话 框 


Y 文本 域 : 用 于 指定 内 容 要 进行 变化 的 文本 域 ， 可 从 右 侧 的 下 拉 列 表 中 选择 一 个 文本 域 。 
新 建文 本 : 用 于 指定 在 文本 域 中 要 显示 的 内 容 。 可 输入 任何 的 HTML 语句 以 及 JavaScript 代码 ， 
这 些 内 容 将 代替 文本 域 中 原 有 的 内 容 
3. 设置 状态 栏 文本 
“设置 状态 栏 文本 ”行为 用 于 指定 的 事件 触发 后 ， 在 状态 栏 显示 信息 。 例 如 ， 当 浏览 者 将 鼠标 指针 移 
动 到 超级 链接 上 时 ， 在 状态 栏 中 显示 链接 的 地 址 
“设置 状态 栏 文本 ”对 话 框 如 图 10-56 所 示 


设置 状态 本 文本 | 


图 10-56 “设置 状态 栏 文本 ”对 话 栓 
站 消息 : 用 于 输入 需要 显示 的 信息 
10.2.15 上 机 练习 一 一 制作 圣诞 贺卡 


二 朱 习 目标 


通过 10.2.14 节 “ 设 置 文本 ”对 话 框 参数 设置 的 讲解 ， 结 合 本 节 练 习 ， 熟练 10-6 上 机 练习 -制作 


掌握 添加 三 种 文本 行为 的 操作 方法 。 圣诞 锅 卡 
设计 思路 


首先 新 建 一 个 空白 的 网 页 文件 ， 使 用 Div 和 CSS 设置 卡片 布局 和 背景 ， 并 插入 图 像 和 文本 域 。 接 
下 来 通过 “行为 ”面板 添加 “设置 文本 域 文 本 ”和 “设置 状态 栏 文本 ”行为 ， 并 分 别 指定 触发 事件 为 
onClick ( 鼠标 单 击 ) 和 onMouseOver ( 鼠标 经 过 )。 

本 例 最 终 效果 如 下 : 单 击 圣诞 树 图 片 ， 文 本 域 中 将 显示 指定 的 文本 ， 效 果 如 图 10-57 所 示 ; 将 鼠标 指 
针 移 到 滑雪 图 片上 时 ， 状 态 栏 上 将 显示 指定 的 文本 ， 效 果 如 图 10-58 所 示 。 
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| 网 I 本 ” 拒 10055 = 午 计 其 ti | 全 护 杭 式 , 于 用 而 胞 100%6 。 
图 10-57 “设置 文本 域 文本 ”的 效果 图 10-58 “设置 状态 栏 文本 ”的 效果 
户 鸭 操作 步 时 
1. 新建 文件 


执行 “文件 ” |“ 新 建 ” 命令 ,在 弹出 的 “新 建文 档 ” 对 话 框 中 设置 文档 类 型 为 HTML ,无 框架 , 单 击 “ 创 
建 ” 按 钮 新 建 一 个 空白 的 HTML 文档 。 

2. 插入 Div 布局 块 

执行 “插入 ”| “Div” 命令 ,在 弹出 的 “插入 Div” 对话 框 中 设置 ID 为 card, 如 图 10-59 所 示 。 单 击 “ 确 
定 ” 按 钮 关闭 对 话 框 。 


图 10-59 “插入 Div” 对 话 框 


3. 定义 CSS 规则 格式 化 Div 布局 块 

执行 “窗口 ”|“CSS 设计 器 ”命令 , 打开 “CSS 设计 器 ”面板 。 单 击 “ 添 加 CSS 源 ” 按 钮 ， 在 弹出 
的 下 拉 菜 单 中 选择 “在 页 面 中 定义 "; 单 击 “添加 选择 器 ”按钮 ， 在 出 现 的 空 行 中 输入 选择 器 名 称 #card; 
切换 到 “属性 ”列表 ， 设 置 宽 (width ) 为 640px， 高 (height ) 为 450px， 左 、 右 外 边 距 ( margin ) 为 
auto， 文 本 (text-align ) 居中 对 齐 ， 边 框 宽 (width ) 为 8px， 样 式 ( style ) 为 double， 颜 色 (color ) 为 
碍 F3300 ( 橙色 )， 并 设置 背景 图 像 ， 如 图 10-60 所 示 。 


4. 在 布局 块 中 添加 内 容 

使 用 “插入 ”| “图 像 ”命令 ,在 布局 块 中 插入 两 张 图 片 ,并 输入 相应 的 文字 ; 执行 “插入 ”| “表单 "| “ 文 
本 ”命令 ,插入 一 个 文本 字段 ， 将 文本 字段 的 标签 占 位 文本 修改 为 “看 这 里 : ”"， 然 后 在 属性 面板 上 设置 
文本 域 的 Name 属性 为 content。 此 时 的 页 面 效果 如 图 10-61 所 示 。 
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+ -属性 

员 回 日 国 口 
员 布局 

width : 540 px 
hewght : 450 px 


margin 


图 10-60 card 的 CSS 属性 图 10-61 页 面 效 果 1 


5. 定义 文本 框 的 CSS 规则 

打开 “CSS 设计 器 ”面板 ， 单 击 “ 添 加 选择 器 ”按钮 ， 在 出 现 的 空 行 中 输入 选择 器 名 称 #content。 
切换 到 “属性 ”列表 , 设置 文本 颜色 ( color ) 为 # 丁 F3300, 字体 ( font-family ) 为 Impact, 字号 ( font-size ) 
为 xx-large; 边框 宽 (width ) 为 medium， 样 式 (style ) 为 ridge， 如 图 10-62 所 示 。 此 时 的 页 面 效果 如 
图 10-63 所 示 。 


+ -属性 
国 日 口 
回 
color 


font-family 


font-size 


图 10-62 content 的 CSS 属性 图 10-63 ”页面 效果 2 


6. 添加 “设置 文本 域 文 本 ”行为 

选中 页 面 上 的 圣诞 树 ， 打 开 “ 行 为 ”面板 ， 单 击 “行为 ”面板 上 的 “添加 行为 ”按钮 ， 在 弹出 的 行 
为 菜单 中 选择 “设置 文本 ”|“ 设 置 文本 域 文字 ”行为 ， 打开“ 设置 文本 域 文字 ”对 话 框 。 

在 “文本 域 ”下 拉 列 表 中 选中 内 容 将 发 生变 化 的 文本 域 input “content 。 
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在 “新 建文 本 ”文本 域 中 输入 将 在 文本 域 中 显示 的 内 容 Merry Christmas*^O^*， 如 图 10-64 所 示 。 


设 于 文本 城 文字 | 


图 10-64 “设置 文本 域 文字 ”对 话 杠 

7. 指定 触发 事件 

单 击 “确定 ”按钮 关闭 对 话 框 ,在 “行为 ”面板 上 设置 触发 该 动作 的 事件 为 onClick, 如 图 10-65 所 示 。 
8. 添加 “设置 状态 栏 文本 ”行为 


选中 页 面 上 的 滑雪 图 片 ， 打 开 “ 行 为 ”面板 ， 单 击 “行为 ”面板 上 的 “添加 行为 ”按钮 ， 在 弹出 的 


行为 菜单 中 选择 “设置 文本 ”|“ 设 置 状 态 栏 文本 ”行为 ， 打 开 “ 设 置 文本 域 文字 ”对 话 框 。 在 “消息 ” 
文本 框 中 输入 “圣诞 节 我 们 一 起 去 滑雪 吧 : 六 ， 如 图 10-66 所 示 
9. 指定 触发 事件 


单 击 “确定 ”按钮 关闭 对 话 框 ， 在 “行为 ”面板 上 设置 触发 该 动作 的 事件 为 onMouseOver， 如 
图 10-67 所 示 。 


图 10-65 ”设置 触发 事件 图 10-66 “设置 状态 栏 文 本 ”对 话 框 图 10-67 设置 触发 事件 


10. 保存 文档 
在 浏览 器 中 预览 页 面 效 果 ， 如 图 10-57 和 图 10-58 所 示 


10.2.16 “显示 - 隐藏 元 素 


显示 - 隐藏 元 素 ” 行 为 用 于 修改 一 个 或 多 个 已 命名 的 网 页 元 素 的 可 见 性 ， 通 常用 于 用 户 与 页 面 进行 
交互 时 显示 言 息 。 例 如 ， 当 用 户 将 鼠标 指针 滑 过 一 个 人 物 的 图 像 时 ， 可 以 显示 该 人 物 的 姓名 、 性 别 、 年 
龄 和 星座 等 详细 信息 
选择 一 个 网 页 元 素 并 打开 “行为 ”面板 ， 单 击 “ 添 加 行为 ”按钮 ， 在 弹出 的 快捷 莱 单 中 选择 “显示 - 
隐 茂 元素” 命令， 弹出 “显示 - 隐藏 元 素 ”对 话 框 ， 如 图 10-68 所 示 。 
9 元 素 : 该 列表 框 中 列 册 了 当前 页 面 所 有 已 命名 的 元 素 。 


和 显示 : 单 击 此 按钮 ， 使 指定 的 元 素 在 页 面 上 可 见 。 
9 隐藏: 单 击 此 按钮 ， ee 
和 默认 : 单 击 此 按钮 ， 则 按 默认 值 决定 元 素 是 否 - 般 为 可 见 
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图 10-68 “显示 - 隐藏 元 素 ”对 话 杠 


10.2.17 上 机 练习 


< 穆 习 日 标 aks 


通过 10.2.16 节 “ 显 示 - 隐藏 元 素 ” 对 话 框 参 数 设 置 的 讲解 , 结合 本 节 练 习 ， 10-7 上 机 练习 一 一 制作 
熟练 掌握 显示 / 隐藏 页 面 元 素 的 操作 方法 ， 以 及 网 页 元 素 定位 的 方法 简易 相册 


制作 简易 相册 


设计 思路 
首先 新 建 一 个 空白 的 网 页 文件 ， 使 用 Div、 表 格 和 CSS 设置 相册 布局 和 背景 ， 并 插入 图 像 。 接 下 来 
通过 “行为 ”面板 添加 “显示 - 隐藏 元 素 ” 行 为 ， 并 指定 触发 事件 为 onClick ( 鼠标 单 击 )。 


户 鸭 操作 步 对 
1. 新 建文 件 
执行 “文件 ” |“ 新建” 命令 ,在 弹出 的 “新 建文 档 ” 对话 框 中 设置 文档 类 型 为 HTML ,无 框架 , 单 击 “ 创 

建 ”按钮 新 建 一 个 空白 的 HTML 文档 
2. 插入 Div 布局 块 
执行 “插入 ”|“Div” 命 令 ， 在 弹出 的 “插入 Div” 对 话 框 中 设置 ID 

为 album， 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 
3. 定义 CSS 规则 格式 化 Div 布局 块 
执行 “窗口 "| “CSS 设计 器 ”命令 ,打开 “CSS 设计 器 ” 面板 。 单 击 “ 添 

加 CSS 源 ” 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 “在 页 面 中 定义 ”; 单 击 “ 添 

加 选择 器 ”按钮 ,在 出 现 的 空 行 中 输入 选择 器 名 称 #album; 切换 到 “属性 ” 

列表 ， 设 置 宽 (width ) 为 620px， 左 、 右 外 边 距 ( margin ) 为 aato， 并 设 

置 背景 图 像 ， 如 图 10-69 所 示 


4. 插入 表格 

删除 Div 标签 中 的 占 位 文本 ,执行 “插入 ”|“ 表 格 ” 命 令 ， 在 弹出 
的 对 话 框 中 ， 设 置 表格 行 数 为 5， 列 为 2， 表格 宽度 为 600px， 边 框 粗细 、 
单元 格 边 距 和 单元 格 间 距 均 为 0。 选 中 表格 ， 在 “属性 ”面板 上 设置 对 齐 
方式 为 “居中 对 齐 ”。 图 10-69 album 的 CSS 属性 


5. 设置 单元 格 属性 

选中 第 1 列 单元 格 ， 设置 单元 格 宽度 为 120, 第 1 行 和 最 后 一 行 的 高 度 为 10; 选中 第 1 列 的 第 2 行 
至 第 4 行 单元 格 , 设 置 单元 格 内 容 水 平和 垂直 对 齐 方 式 均 为 “居中 ”; 选中 第 2 列 的 第 2 行 至 第 4 行 单元 格 ， 
击 “ 属 性 ”面板 上 的 “合并 单元 格 ” 按 钮 ， 然 后 设置 单元 格 内 容 水 平 “ 左 对 齐 "， 垂 直 “ 居 中 对 齐 ”。 


+ 一 选 吾 如 : #album 


ho 
翅 
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6. 插入 图 像 

将 鼠标 指针 定位 在 第 1 列 第 2 行 单元 格 中 ,执行 “插入 ”|“ 图 像 ” 命 令 , 插 入 导航 图 像 。 同 样 的 方法 ， 
在 其 他 单元 格 中 插入 图 像 ， 效 果 如 图 10-70 所 示 。 

7. 插入 其 他 图 像 

选中 第 2 列 中 的 图 像 , 在 “属性 ”面板 上 设置 ID 为 p1; 然后 将 鼠标 指针 放置 在 图 片 右 侧 , 执 行 “ 插 
入 ”|“ 图 像 ”命令 ， 插 入 第 二 个 导航 图 片 链接 的 图 片 ， 并 在 “属性 ”面板 上 设置 ID 为 Pp2， 如 图 10-71 
所 示 。 


图 10-70 ”页面 效果 图 10-71 插入 图 像 


昌 几 提示: 为 便于 图 片 美观 ， 本 例 将 所 有 图 片 的 尺寸 设置 为 相同 宽度 480px 和 高 度 300px。 


同样 的 方法 ， 插 入 第 三 个 导航 图 片 链接 的 图 片 ， 并 将 图 片 ID 设置 为 p3。 

8. 定义 规则 隐藏 图 片 

打开 “CSS 设计 器 "面板 , 单 击 “ 添 加 选择 器 ”按钮 ,在 出 现 的 空 行 输入 选择 器 名 称 如 2; 切换 到 “属性 ” 
列表 ， 设 置 上 边 距 为 -303px，position 属性 为 absolute，display 属性 为 inherit，visibility 属性 为 hidden ， 
如 图 10-72 所 示 。 

同样 的 方法 ， 定 义 规则 元 3 设置 第 三 张 图 片 的 位 置 和 显示 方式 ， 如 图 10-73 所 示 。 

设置 完成 ， 保 存 文 件 ， 在 浏览 器 的 显示 效果 如 图 10-74 所 示 。 


图 10-72 ”p2 前 CSS 属性 图 10-73 p3 的 CSS 属性 
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图 10-74 在 浏览 器 中 预览 页 面 效果 


9. 添加 行为 实现 交互 
ths - 张 导航 图 片 ， 单 击 
素 ” 命 令 ， 弹 出 “显示 - 隐 
列表 中 渤 择 i img “pl"， 单 击 
”列表 中 选择 img“p2”， 单 二 按钮 ; 

在 “元 素 ” 列 表 中 选择 img “p3”, 单 击 按钮 ; 如 图 10-75 所 示 , 单 击 
在 “行为 ”面板 上 设置 触发 事件 为 onClick， 如 图 10-76 所 示 


”对 话 框 
示 ” 按 钮 ; 


i 


同样 的 方法 ， 为 其 他 两 张 导航 图 片 添加 “显示 - 隐藏 元 素 ”行为 ， 并 指定 触发 事件 。 


话 框 分 别 如 图 10-77 和 图 10-78 所 示 


图 10-75 “显示 隐藏 元 素 ” 对 话 框 1 图 10-76 设置 触发 事件 


性 | 


图 10-77 “显示 隐藏 元 素 ” 对 话 框 2 图 10-78 “显示 隐藏 元 素 ” 对 话 框 3 


10. 保存 文档 


并 预览 效果 。 在 浏览 器 中 的 预览 效果 如 图 10-79 所 示 ， 单 击 第 一 个 导航 按钮 ， 


显示 图 片 p1; 单 击 第 二 个 导航 按钮 ， 显 示 图 片 p2; 单 击 第 三 个 导航 按钮 ， 显 示 图 


右 侧 的 图 
片 p3。 


片 显示 


面板 上 的 “添加 行为 ”按钮 ， 在 弹出 的 快捷 菜单 中 选择 “显示 - 


“确定 ”按钮 关闭 对 话 框 ， 


对 应 的 设置 对 


区 域 
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图 10-79 页面 效果 


10.2.18 ”检查 表单 

“检查 表单 ”行为 用 于 检查 指定 表单 构件 的 内 容 以 确保 输入 正确 的 数据 类 型 。 通 常 使 用 onBlur 事件 
将 此 行为 附加 到 单个 表单 构件 ， 在 填写 表单 时 对 表单 构件 的 值 进行 检查 ; 或 使 用 onSubmit 事件 将 其 附加 
到 表单 ， 在 单 击 “ 确 定 ” 按 钮 时 ， 同 时 对 多 个 表单 构件 进行 检查 。 
选择 表单 或 一 个 表单 构件 并 打开 “行为 ”面板 , 单 击 “ 添 加 行为 ”按钮 ,在 弹出 的 快捷 菜单 中 选择 “ 检 
查 表单 ”命令 ， 弹 出 “检查 表单 ”对 话 框 ， 如 图 10-80 所 示 。 


input "password" 


图 10-80 “检查 表单 ”对 话 框 


9 域 : 该 列表 框 中 列 出 所 有 可 用 的 域名 ， 在 这 里 可 以 指定 要 检查 的 表单 元 素 。 

9 必需 的 : 选中 此 项 ， 则 表单 构件 必须 填 有 内 容 ， 不 能 为 空 。 

和 9 任何 东西 : 选中 此 项 ， 则 该 表单 对 象 不 能 为 空 ， 但 不 需要 包含 任何 特定 类 型 的 数据 。 如 果 没 有 选 
择 “ 必 需 的 ”选项 ， 则 该 选项 毫 无 意义 。 

数字 : 选中 此 项 ， 则 检查 该 域 是 否 只 包含 数字 。 

和 电子 邮件 地 址 : 选中 此 项 ， 则 检查 指定 表单 构件 是 否 包含 一 个 @ 符号 。 
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数字 从 : 选中 此 项 ， 则 表单 对 象 内 只 能 输入 指定 
10.2.19 ”上 机 练习 一 一 验证 表单 内 容 的 正确 性 


二 练习 目标 


通过 10.2.18 节 讲 解 的 基础 知识 ， 结 合 实例 学 习 为 页 面 9 


表单 ”行为 的 方法 。 
/设计 思路 


范 


P 的 表单 添加 “检查 


目的 数字 。 


南 


10-8 上 机 练习 一 一 验证 
表单 内 容 的 正确 性 


本 实例 对 页 面 中 的 表单 在 提交 时 进行 有 效 性 检查 。 首 先 选中 页 面 中 需要 检查 的 表单 ， 然 后 为 该 表单 
添加 “检查 表单 ”行为 , 分 别 设置 各 个 表单 构件 可 接受 的 值 , 最 后 修改 代码 , 将 提示 的 英文 信息 改 为 中 文 。 


户 鸭 操作 步 对 


1, 打开 文件 


执行 “文件 ” |“ 打开” 命令, 在 弹出 的 对 话 框 中 选择 一 个 含有 表单 的 HTML 页 面 , 如 图 10-81 所 示 。 


2. 添加 “检查 表单 ”行为 


选中 要 检查 的 表单 ,执行 “窗口 "|“ 行 为" 命令 ,打开 “行为 ” 面板 。 单 击 “行为” 面板 上 的 “添加 行为 ” 
按钮 ， 在 弹出 的 快捷 菜单 中 选择 “检查 表单 ”命令 ， 打 开 如 图 10-82 所 示 的 “检查 表单 ”对 话 框 。 


| 交 写 个 人 豆 料 ， | 


全 日 期 :| 
ET 用 以 时 份 ， 请 如 有 本 
Fra 


其 籽 已 瘟 记 的 信息 
二 壤 ] 


我 可 本 其 他 人 可 以 搜 直 的 90 下 信息 : 避 姓名 ， 联 系 方式 
本 


图 10-81 待 检查 的 表单 


| 
| 
| 
| 


图 10-82 “检查 表单 ”对 话 框 


六 提示: 网 页 中 的 对 象 命名 应 该 使 用 英文 ， 并 且 不 要 有 空格 和 特殊 符号 。 任 何 类 型 的 对 象 都 


不 要 出 现 同名 的 现象 。 


3. 设置 各 个 表单 构件 可 接受 的 值 


在 “ 域 ”列表 框 中 选中 password, 然后 选中 “必需 的 ” 复 选 框 ,并 在 “可 接受 ” 


区 域 选 择 “任何 东 


在 “ 域 ”列表 框 中 选择 year， 然 后 选中 “必需 的 ” 复 选 框 ， 并 在 “可 接受 ”区 域 选中 “数字 从 ”， 范 


围 为 1900 ~ 2016。 


围 为 1~31。 


在 “ 域 ” 列 表 框 中 选择 idcard， 然 后 选中 “必需 的 ” 复 选 框 ， 并 在 “可 接受 ” 
在 “ 域 ”列表 框 中 选择 info, 然 后 选中 “必需 的 ” 复 选 框 ,并 在 “可 接受 ”区 域 选中 “任何 东西 


设置 完成 后 的 对 话 框 如 图 10-83 所 示 。 


在 “ 域 ”列表 框 中 选择 day， 然 后 选中 “必需 的 ” 复 选 框 ， 并 在 “可 接受 ” 


区 域 选中 


区 域 选中 “数字 ”。 


4. 设置 触发 事件 


单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ,然后 在 “行为 ”面板 中 将 触发 
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事件 设置 为 onSubmit, 如 图 10-84 所 示 。 
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图 10-83 设置 表单 构件 可 接受 的 值 图 10-84 ”设置 触发 事件 
5. 保存 文件 
执行 “文件 ”|“ 保 存 ” 命 令 保存 文档 ， 在 浏览 器 中 预览 页 面 效 果 ， 如 图 10-85 所 示 
请 填写 个 人 变 料 ; 
于 万 ， 密码 可 以 使 用 长 席 为 6-14 的 任 章 宇 
fm, a” os 
区 
NE , 漠 如 实 需 写 
和 ED 
.| 
我 原 叶 其 也 人 可 以 搜寻 到 我 的 加 下 信息 ， 加 姓名， 联系 方 式 。 口 其 记 己 
3] 
图 10-85 ”弹出 警告 寻 话 杠 
人 “密码 ” 域 为 空 ; 出 生日 期 的 “年 ”不 在 1900~2012 之 间 ,“ 日 ”不 是 1~31 间 的 数字 ; 身份 证 
号 码 不 是 全 为 数字 ， 则 提交 表单 时 ， 会 弹出 一 个 警告 的 对 话 框 ， 人 并 取消 提交 表单 。 
检 查 表 单行 为 默认 的 提示 广 文字 为 英文 ， 用 户 可 以 转换 到 “代码 ”视图 中 ， 找 到 相关 的 脚本 代码 ， 将 
提示 信息 修改 为 中 文 
6. 修改 提示 信息 
单 击 “文档 ”工具 栏 上 的 “代码 ”按钮 ， 切 换 到 “代码 ”视图 。 在 代码 中 找到 弹出 的 警告 对 话 框 中 


的 提示 英文 字段 ， 如 图 10-86 所 示 


替换 为 中 文 ， 如 图 10-87 所 示 


图 10-86 ”需要 修改 的 英 交 文本 
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图 10-87 ”替换 为 中 文 文 本 


7. 保存 文件 
执行 “文件 ” |“ 保存 ”命令 ， 保 存 页 面 ， 然 后 在 浏览 器 中 预览 页 面 ， 并 测试 验证 表单 的 行为 ， 提 示 
框 如 图 10-88 -A 可 以 看 到 ， 提 示 对 话 框 中 的 提示 文字 已 经 改 为 中 文 


我 怕 时 其 他 人 可 以 扫 索 天 我 的 好 下 信 e。 可 寻 名 ， 联 系 方式 。 于 其 他 已 从 记 的 信息 
于 EE 
| PT 


图 10-88 ”验证 表单 效果 


10.3 答疑 解 惑 


1. 行 为 与 事件 和 动作 之 间 的 关系 ? 
答 : 行为 是 事件 和 动作 的 组 合 。 事 件 是 在 特定 的 时 间或 是 在 用 户 发 出 指令 后 紧 接 着 发 生 的 ， 例 如 ， 
网 页 下 载 完 毕 、 用 户 按键 或 是 单 击 鼠 标 等 。 而 动作 是 在 事件 发 生 后 所 做 出 的 反应 例如， 打开 新 的 浏览 
器 窗口 、 弹 出 菜单 等 
2. 利用 行为 制作 一 个 导航 条 ， 选 中 文本 后 ， 为 什么 “行为 ”下 拉 菜 单 中 的 命令 均 显示 为 灰色 ? 
答 : 行为 不 能 附加 到 纯 文本 上 。 如 果 要 为 文本 添加 行为 ， 可 以 把 文本 转换 为 空 链 接 再 操作 
3. 在 Dreamweaver CC 2018 中 怎么 查看 行为 的 代码 ? 
答 : 首先 在 “设计 ”视图 中 选择 一 个 页 面 元 素 并 添加 行为 ， 然 后 切换 到 “代码 ”视图 ， 即 可 看 到 相 
应 的 js 代码 。 
4. 在 为 图 片 添加 行为 后 ， 想 把 触发 事件 设置 为 onSubmit， 但 在 事件 列表 中 找 不 到 onSubmit， 为 
I 


: 行为 是 与 页 面 中 的 元 素 相关 的 ， 也 就 是 说 ,不同 的 元 素 可 用 的 行为 也 不 尽 相 同 ， 对 应 的 触发 事 
a Onsubmit 事件 常用 于 触发 表单 构件 的 动作 ， 如 果 想 把 onsubmit 加 载 到 一 个 图 片上 ， 是 不 会 
有 这 个 行为 事件 的 。 如 果 选 中 一 个 表单 构件 ， 则 可 在 事件 列表 中 显示 onsubmit。 
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10.4 学 习 效 果 自 测 


一 、 选 择 题 
1.“ 动 作 ” 是 Dreamweaver CC 2018 预先 编写 好 的 ) 脚本 程序 ， 通 过 在 网 页 中 执行 这 段 代码 就 
可 以 完成 相应 的 任务 。 
A. VBScript B. JavaScript CEE D.JSP 
2. 用 户 填写 完 一 个 注册 网 页 ， 单 击 “ 确 定 ” 按 钮 ， 网 页 将 检查 所 填写 的 资料 的 有 效 性 ， 这 是 使 用 了 
Dreamweaver CC 2018 的 人 ) 行为 。 


A. 检查 表单 B. 检查 插件 C. 检查 浏览 器 D. 改变 属性 
3. 在 Dreamweaver CC 2018 中 ， 下 面 ( ) 不 是 行为 类 型 的 。 
A. 打开 新 的 浏览 器 窗口 B. 弹出 消息 
C . 隐藏 元 素 D. 网 页 错误 
4. 在 Dreamweaver CC 2018 中 ，Behavior ( 行为 ) 的 组 成 要 素 是 ( 路 
A. 事 件 B. 动 作 C. 初级 行为 D. 最 终 动作 
5. 当 鼠 标 指针 移动 到 文字 链接 上 时 显示 一 个 隐藏 的 元 素 ， 这 个 动作 的 触发 事件 应 该 是 〈 项 
A. onClick B. onDblClick C. onMouseOver D. onMouseOnut 
二 、 判 断 题 


1. 在 Dreamweaver CC 2018 中 ， 行 为 就 是 动作 。( ) 

2. 可 以 在 页 面 中 的 任何 元 素 上 添加 行为 。( ) 

3. 任何 行为 都 要 添加 在 <body> 标签 中 。( ) 

4. 在 添加 检查 表单 行为 时 ， 弹 出 的 提示 框 是 英文 的 。( ) 

三 、 填 空 题 

1. 行 为 由 人 ) 和 ( ) 两 部 分 组 成 ，( ) 由 ( ) 来 激活 。 

2. 行为 是 指 ( )， 在 添加 行为 的 任何 时 候 都 要 遵循 的 三 个 步骤 分 别 为 〈 2 | 

3. 在 为 页 面 添 加 弹出 信息 的 行为 时 ， 首 先 要 选择 ( ) 中 的 ( ) 标签 。 

4. 当 鼠 标 指针 指向 一 张 图 片 ， 图 片 发 生 轮 蔡 ， 此 时 鼠标 指针 移动 被 称 为 ( )， 图 片 发 生 的 变化 成 
为 ( )。 


四 、 操 作 题 
熟悉 各 种 行为 和 事件 的 效果 。 


过 程 中 ， 往 往 需要 建立 大 量 外 观 及 部 分 内 容 相同 的 
具有 统一 的 外 观 和 结构 。 如 果 逐 页 建立 、 修 改 会 很 费时 、 
费力 ， 效 率 不 高 ， 而 且 容易 出 错 。Dreamweaver CC 2018 提供 两 种 可 3 

重复 使 用 的 部 件 来 解决 以 上 问题 ， 这 就 是 模板 和 库 。 
模板 是 一 种 页 面 布局 ， 重 复 使 用 的 是 网 页 的 一 部 分 结构 。 而 库 是 
一 种 放置 在 网 页 上 的 资源 ， 重 复 使 用 的 是 网 页 对 象 。 但 它们 两 者 有 一 3 
个 相同 的 特性 ， 就 是 与 应 用 它们 的 文档 都 保持 关联 ， 在 更 改 库 项 目 或 
模板 的 内 容 时 ， 可 以 同时 更 新 所 有 与 之 关联 的 页 面 。 本 章 将 介绍 使 用 3 
库 与 模板 统一 网 站 风格 的 方法 ， 包 括 创建 模板 和 库 项 目 、 编 辑 模板 元 3 


@@ 了 解 模 板 的 基本 概 


令 掌握 创建 模板 和 模板 元 素 的 方法 
令 掌握 使 用 模板 创建 网 页 的 操作 
急 创建 和 使 用 库 项 


第 11 章 297 
统一 站 点 风格 


11.1 认识 “资源 ”面板 


在 Dreamweaver CC 2018 中 ,使 用 “资源 ”面板 可 以 对 网 站 中 所 有 的 资源 ， 包 括 图 像 、 链 接 、 媒 体 、 
脚本 、 模 板 、 库 ， 甚 至 颜色 进行 统一 管理 。 

在 “文件 ”面板 中 选中 一 个 本 地 站 点 之 后 ， 执 行 “ 窗 口 ”| “资源 ”命令 ， 即 可 调 出 “资源 ”面板 ， 
显示 当前 站 点 中 的 资源 列表 ， 如 图 11-1 所 示 。 

1. 查看 资源 的 方式 

从 图 11-1 可 以 看 出 ,“ 资 源 ” 面 板 0000 提供 了 两 种 查看 站 点 资源 的 方式 : 

和 站 点 列表 : 列 示 当 前 站 点 中 使 用 的 所 有 资源 及 类 型 ， 如 图 11-1 所 示 为 站 点 中 的 图 像 资 源 列表 。 

和 收藏 列表 : 用 于 收藏 常用 的 资源 。 收 藏 资源 并 不 作为 单独 的 文件 存储 在 磁盘 上 , 它们 是 对 “站 点 ” 

视图 列表 中 的 资源 的 引用 。 

在 “站 点 "视图 下 , 单 击 “资源 "面板 右 下 角 的 “添加 到 收藏 夹 " 按钮 国 ,可 将 选中 的 资源 添加 到 收藏 夹 。 

在 “收藏 ”视图 下 , 单 击 “ 资 源 ”面板 右 下 角 的 “从 收藏 中 删除 ”按钮 天， 可 取消 收藏 ， 如 图 11-2 所 示 。 


1113.gf 
1125 


[3 


图 11-1 “资源 ”面板 图 11-2 “资源 ”面板 的 “收藏 ”视图 
默认 情况 下 ,类 别 中 的 资源 按 名 称 的 字母 顺序 列 出 ,用 户 可 以 单 击 标题 栏 上 的 标题 按 名 称 、 大 小 、 维 数 、 
格式 或 完整 路 径 进 行 排序 ， 如 图 11-3 所 示 
2. 资源 类 别 
使 用 “资源 ”面板 左 侧 的 按钮 ， 可 以 在 当前 站 点 不 同 的 资源 类 别 之 间 进 行 切换 ， 如 图 11-4 所 示 。 


加 
四 
加 
加 
加 
四 
四 
四 


图 11-3 ”对 资源 列表 进行 排序 图 11-4 资源 类 别 
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a 


下 像 辐 : 当前 站 点 中 的 GIF、JPEG 或 PNG 格式 的 图 像 文 件 。 


9 颜色 国 : 当前 
3 URLs 项 : 当前 站 


点 中 的 文档 和 样式 表 中 使 用 的 所 有 颜色 ， 包 括 文本 颜色 、 背 景 颜色 和 链接 颜色 。 
点 文档 中 使 用 的 外 部 链接 ， 包括 FTP、HTTP、HTTPS、JavaScript、 电 子 邮 件 


(mailto) 以 及 本 地 文件 (file://) 链接 。 

9 媒体 国 : 当前 站 点 中 的 媒体 文件 列表 ， 如 SWFE 文件 、Adobe Shockwave 文件 、QuickTime 或 
MPEG 文件 。 

y 脚本 园 : 当前 站 点 中 独立 的 JavaScript 或 VBScript 文件 列表 。HTML 文件 中 的 脚本 不 出 现在 “ 资 


源 ” 面 板 中 


y 模板 国 : 当前 站 点 中 的 所 有 模板 
Y 库 加 : 当前 站 点 中 的 所 有 库 项 目 


3. 功能 按钮 
【天 】: 将 选中 的 资源 插入 到 当前 文档 中 


Y 图 : 刷新 站 点 列表 ， 更 新 资源 
3 图 : 打开 当前 在 资源 列表 中 选中 的 资源 进行 编辑 
y 园 : 将 当前 选中 的 资源 添加 到 收藏 夹 


11.2 创建 模板 


模板 提供 了 一 种 建立 同一 类 型 网 页 基本 框架 的 方法 ， 将 网 页 中 国定 的 内 容 设 置 为 锁定 区 域 ， 将 需要 


修改 的 内 
修改 模板 
模板 


元 素 。 


容 指定 为 可 编辑 区 域 。 基 于 这 个 模板 创建 文档 ， 可 以 得 到 与 模板 相似 但 又 有 所 不 同 的 新 网 页 ， 
时 ， 使 用 该 模板 创建 的 所 有 网 页 可 以 自动 更 新 
的 制作 方法 与 普通 网 页 类 似 ， 不 同 的 是 模板 在 制作 完成 后 应 定义 可 编辑 区 域 、 重 复 区 域 等 模板 


11.2.1 使 用 “模板 ”面板 创建 模板 


六 


即 可 切换 到 “模板 ”面板 ， 如 图 11-5 所 示 。 面 板 上 半 部 分 显 


内 行 “窗口 ”|“ 资 源 ”命令 ， 调 出 “资源 ”面板 ， 单 击 “ 资 源 ” 面 板 左 侧 的 “模板 ”按钮 圈 ， 


前 选择 的 模板 的 缩 略 图 ， 下 半 部 分 则 是 


当前 站 点 中 所 有 模板 的 列表 
(2 ) 单 击 “ 模 板 ”面板 底部 的 “新 建 模板 ”按钮 圈 , 模板 列表 底部 出 现 一 个 新 模板 , 且 名 称 为 可 编辑 


状态 ， 如 


到 11-6 所 示 。 
扩展 按钮 


模板 预览 区 
模板 


模板 列表 区 


列表 
新 建 模板 
图 11-5 “模板 ”面板 图 11-6 新 建 模板 
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(3 ) 输入 模板 名 称 之 后 按 Enter 键 ， 或 单 击 面板 其 他 空白 区 域 ， 即 可 创建 一 个 空 模板 


澡 注意 : 创建 模板 之 后 ，Dreamweaver CC 2018 会 自动 在 本 地 站 点 目录 中 添加 一 个 名 为 Templates 
的 文件 夹 ， 然 后 将 模板 文件 存储 到 该 目录 中 。 不 要 将 模板 移动 到 Templates 文件 夹 之 外 ,或 者 将 任何 
非 模板 文件 放 在 Templates 文件 夹 中 。 也 不 要 将 Templates 文件 夹 移动 到 本 地 站 点 根 文件 夹 之 外 。 


11.2.2 ”使 用 “新 建文 档 ” 对 话 框 创建 模板 


' 命令， 打开“ 新 建文 档 ”对 话 框 
" 栏 选中 “新 建文 档 ”; 在 "文档 类 型 "列表 中 选择 "HTML 模板 ", 如 图 11-7 所 示 ， 


(1) 执行 “文件 ”| 人 

在 对 话 框 左 侧 的 "类 兄 
然后 单 击 “创建 ”按钮 

(2 ) 执行 “文件 ” |“ 保存” 命令 ， 保 存 空 模板 文件 ， 此 时 会 弹出 一 个 对 话 框 ， 提 醒 用 户 本 模板 没有 
可 编辑 区 域 ， 如 图 11-8 所 示 

(3 ) 单 击 “确定 ”按钮 ， 弹 出 如 图 11-9 所 示 的 “另存 模板 ”对 话 框 


| 本 

也 模板 

国 Fs 
4 


< HTML 模板 
《7> PHP 模板 


图 11-7 “新 建文 档 ” 对 话 框 


图 11-8 ”警告 对 话 框 图 11-9 “另存 模板 ”对 话 框 
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全 入 高 
和 站 点 : 在 该 下 拉 列 表 中 选择 要 存放 模板 的 站 点 。 


9 现存 的 模板 : 站 点 中 已 有 的 模板 列表 。 

9 描述 : 用 于 对 模板 进行 简单 说 明 。 

和 9 另存 为 : 用 于 设置 模板 名 称 。 例 如 example 1 。 

(4) 单 击 “保存 ”按钮 关闭 对 话 框 。 此 时 ， 在 “文件 ”面板 中 可 以 看 到 
自动 生成 的 Templates 文件 夹 和 创建 的 模板 文件 ， 如 图 11-10 所 示 。 


11.2.3 上 机 练习 一 一 将 文档 保存 为 模板 


图 11-10 查看 创建 的 模板 文件 
< 夭 习 目标 


本 节 介绍 创建 模板 的 另 一 种 常用 方法 ， 将 已 编辑 好 的 文档 存储 为 模板 。 通 过 实例 掌握 “另存 为 ” 命 
令 和 “另存 为 模板 ”命令 的 区 别 ， 加 深 对 Templates 文件 夹 的 理解 。 


和 /设计 思路 
首先 打开 一 个 已 有 的 网 页 文件 ， 然 后 分 别 使 用 “另存 为 ”命令 和 “另存 


为 模板 ”命名 保存 文件 ， : 
11-1 上 机 练习 一 一 将 文档 


的 操作 步骤 保存 为 模板 

1. 打开 文件 

执行 “文件 "| “打开 ”命令 ,在 “选择 文件 ”对话 框 中 选择 一 个 将 作为 模板 的 普通 文件 ,如 图 11-11 所 示 。 
在 标题 栏 可 以 看 到 文件 路 径 和 名 称 (nav.html) 

2. 另存 为 文件 


执行 “文件 ”|“ 另 存 为 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 选 择 站 点 ( 本 例 中 为 test ) 根 目 录 下 的 
Templates 文件 夹 ; 在 “文件 名 ”文本 框 中 输入 文件 名 称 ， 本 例 为 example 01; 在 “保存 类 型 ”下 拉 列 表 
中 选择 “Template Files(*.dwb”， 如 图 11-12 所 示 

[ED i 
【< 二 相让 CE NE Temporer 而 
CT rr 
| 医 aani sms 

Dra 

J 

a 

yem rm 

wma 局 WaS 

Se 9 
| 
Were A 2 | 
图 11-11 打开 的 HTML 文件 图 11-12 “另存 为 ”对 话 框 


写 注意 : 使 用 “另存 为 ”命令 保存 文件 时 ,默认 将 文件 保存 在 站 点 根 目 录 下 。 因 此 在 保存 模板 
文件 时 ， 需 要 将 保存 路 径 设 置 为 站 点 根 目 录 下 的 Templates 文件 夹 。 
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3. 单 击 “ 保 存 ”按钮 

弹出 一 个 提示 对 话 框 ， 询 问 用 户 是 否 要 更 新 链接 。 单 击 “ 是 ”按钮 更 新 模板 中 的 链接 。 

由 于 模板 文件 与 HTML 文件 的 保存 路 径 不 同 ， 因 此 会 弹出 该 对 话 框 。 保 存 文件 后 ， 在 文件 的 标题 栏 
上 可 以 看 到 << 模板 >>example_01.dwt, 如 图 11-13 所 示 ， 表 明 该 文件 为 模板 文件 。 


-| <- 入 顶 >> example_ 0Ldwt 


图 11-13 创建 的 模板 文件 1 


4. 打开 文件 
执行 “文件 ”|“ 打 开 ” 命 令 ， 打 开 如 图 11-11 所 示 的 网 页 文件 (nav.html) 
5. 另存 为 模板 


执行 “文件 ”|“ 男 存 为 模板 ”命令 ， 弹 出 “另存 模板 ”对 话 框 

在 “站 点 ”下 拉 菜 单 中 选择 保存 该 模板 的 站 点 名 称 ， 本 例 选择 test 

在 “描述 ”文本 框 中 输入 该 模板 文件 的 说 明 信 息 。 本 例 保留 默认 设置 。 

在 “另存 为 ”文本 框 中 输入 模板 名 称 。 例 如 example_02， 如 图 11-14 所 示 

如 果 要 履 盖 现 有 的 模板 ， 可 以 从 “现存 的 模板 ”列表 中 选择 需要 履 盖 的 模板 名 称 。 

6. 单 击 “保存 ”按钮 

弹出 一 个 对 话 框 ， 询 问 用 户 是 否 要 更 新 链接 。 单 击 “是 ”按钮 更 新 链接 ， 并 将 该 模板 保存 在 本 地 站 
点 根 目录 下 的 Template 文件 夹 中 

此 时 打开 “文件 ”面板 ， 可 以 看 到 已 创建 的 两 个 模板 文件 ， 如 图 11-15 所 示 


图 11-14 “另存 模板 ”对 话 框 图 11-15 创建 的 模板 文件 2 
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11.3 编辑 模板 元 素 


在 浏览 器 中 预览 11.2 节 创 建 的 模板 文件 ， 会 发 现 该 文档 中 无 法 输入 文本 或 插入 其 他 网 页 元 素 。 这 是 
因为 还 没有 为 模板 定义 可 编辑 区 域 ， 所 有 的 区 域 都 是 锁定 的 。 本 节 将 介绍 在 模板 文件 中 添加 可 编辑 区 域 、 
重复 区 域 的 操作 方法 。 

1.3.1 可 编辑 区 域 

可 编辑 区 域 用 于 在 基于 模板 创建 的 网 页 中 改变 页 面 内 容 ， 可 以 是 文本 、 图 像 或 其 他 的 网 页 元 素 。 可 
以 说 如 果 一 个 模板 没有 可 编辑 区 域 就 毫 无 用 处 ， 因 为 整个 页 面 都 处 于 锁定 状态 ， 无 法 修改 ， 不 能 以 它 为 
模板 创建 有 差异 的 网 页 。 

1. 插入 可 编辑 区 域 

执行 “插入 ”|“ 模 板 ”|“ 可 编辑 区 域 ”命令 ,如 图 11-16 所 示 ; 或 者 在 “模板 ”插入 面板 上 单 击 “ 可 
编辑 区 域 ”按钮 ， 如 图 11-17 所 示 ， 弹 出 如 图 11-18 所 示 的 “新 建 可 编辑 区 域 ” 对 话 框 


BIM) 


代码 上 新 (R) 了 围攻 = 
TR CY 
可 远 区 起 0) ~“ 


重复 区 域 (R) 


可 编 锯 的 可 迁 区 域 (D) 
重复 表格 (T) 


图 11-16 使 用 菜单 命令 插入 可 编辑 区 域 


插入 
模板 


中” 刍 模 板 


图 11-17 使 用 “插入 ”面板 添加 可 编辑 区 域 图 11-18 “新 建 可 编辑 区 域 ” 对 话 框 


3 名 称 : 用 于 指定 可 编辑 区 域 的 名 称 

例如 ， 在“ 名称 ”文本 框 中 输入 text， 单 击 “ 确 定 ” 按 钮 即 可 在 插入 点 添加 一 个 可 编辑 区 域 ， 如 
图 11-19 所 示 ， 可 编辑 区 域 项 部 以 蓝 绿色 标签 显示 名 称 。 

2. 编辑 可 编辑 区 域 的 属性 

选中 可 编辑 区 域 ， 在 “属性 ”面板 上 可 以 修改 可 编辑 区 域 的 名 称 ， 
如 图 11-20 所 示 。 输 入 完成 ， 按 Enter 键 或 单 击 面板 的 其 他 区 域 ， 即 可 
完成 修改 。 

3. 删除 可 编辑 区 域 

在 页 面 上 单 击 可 编辑 区 域 顶 部 的 蓝 绿色 标签 ， 然 后 按 Delete 键 ， 
即 可 删除 。 图 11-19 插入 的 可 编辑 区 域 
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图 11-20 ”可 编辑 区 域 的 “属性 ”面板 


11.3.2 上 机 练习 一 一 制作 景点 门票 


< 入 习 目标 


本 节 练 习 制 作 一 张 简易 门票 ， 在 经 常 要 修改 内 容 的 网 页 区 域 插入 可 编辑 区 ”11-2 上 机 练习 一 一 制作 
域 。 通 过 实例 掌握 在 网 页 中 添加 可 编辑 区 域 的 方法 时 点 门票 


/设计 思路 

首先 新 建 一 个 HTML 文件 ， 使 用 表格 构造 页 面 框架 ， 并 插入 图 像 和 文字 ; 然后 选中 要 修改 的 区 
域 ， 插 和 人 可 编辑 区 域 ; 最 后 基于 制作 好 的 模板 生成 一 个 新 的 网 页 ， 修 改 可 编辑 区 域 的 内 容 ， 最 终 效果 如 
图 11-21 所 示 。 


户 信 操作 步 机 


1. 新 建 一 个 空 模板 
打开 “资源 ”面板 ， 单 击 “ 模 板 ” 按 钮 国 ， 切 换 到 “模板 ”面板 ， 然 后 单 击 面板 底部 的 “新 建 模板 " 


按钮 国 ， 输 入 模板 名 称 ， 如 图 11-22 所 示 ， 按 Enter 键 保 存 模板 


图 11-21 页 面 效 果 图 11-22 新 建 模板 


2. 设计 页 面 布局 

在 模板 列表 中 双击 上 一 步 创 建 的 模板 打开 模板 文件 ， 执 行 “插入 ”|“ 表 格 ”命令 ,在 弹出 的 “表格 ” 
对 话 框 中 ， 设 置 行 数 为 7， 列 为 3， 表格 宽度 为 500px， 边 框 粗细 为 0， 单元 格 边 距 和 单元 格 间 距 均 为 0; 
标题 为 “顶部 ”, 如 图 11-23 所 示 , 单 击 “ 确 定 ” 按 钮 插入 表格 。 选 中 表格 ,在 “属性 ”面板 上 设置 表格 “ 居 
中 对 齐 ”; 然后 合并 第 1 列 单元 格 。 

3. 添加 页 面 内 容 

将 鼠标 指针 放 在 第 1 列 单元 格 中 ， 执 行 “插入 ”|“ 图 像 ”命令 插入 图 像 ; 选中 第 2 行 第 2 列 至 第 7 
行 第 3 列 单元 格 ， 在 “属性 ”面板 上 设置 单元 格 内 容 水 平和 垂直 对 齐 方式 均 为 “居中 ”; 然后 在 单元 格 中 
输入 文字 。 此 时 的 页 面 效 果 如 图 11-24 所 示 。 
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Table | 


图 11-23 “Table”( 表格 ) 对 话 框 图 11-24 插入 效果 


由 于 设置 了 表格 的 标题 为 “顶部 ”， 所 以 第 1 行 的 文字 显示 为 标题 文本 ， 且 居中 

4 . 插入 可 编辑 区 域 

选中 表格 第 1 列 中 的 图 像 ， 执 行 “插入 ”|“ 模 板 ”|“ 可 编辑 区 域 ”命令 ， 弹 出 “新 建 可 编辑 区 域 ” 
对 话 框 ， 在 “名 称 ” 文 本 框 中 输入 icon, 单 击 “ 确 定 ” 按 
钮 关闭 对 话 框 。 同 样 的 方法 ， 选 中 第 2 行 第 2 列 至 第 7 行 
第 3 列 单元 格 ， 然 后 插 人 可 编辑 区 域 ， 名 称 为 content 
此 时 的 页 面 效 果 如 图 11-25 所 示 。 

插入 的 可 编辑 区 在 模板 文件 中 默认 用 蓝 绿色 高 亮 显 
示 ， 并 在 顶端 显示 指定 的 名 称 ， 


灌区 。 | 票 价 (元 ) 


ontent 


5. 保存 模板 i 

执行 “文件 ” |“ 保存” 命令 ， 保 存 模板 图 11-25 “插入 两 个 可 编辑 区 域 

6. 基于 模板 新 建文 件 

打开 “模板 ”面板 ,在 刚 保存 的 模板 文件 上 单 击 鼠标 右键 ,然后 在 弹出 的 快捷 菜单 中 选择 “从 模板 新 建 ” 


命令 ， 如 图 11-26 所 示 。 即 可 新 建 一 个 HTML 文档 并 打开 ， 如 图 11-27 所 示 


恬 轩 果品 国 日 


图 11-26 选择 “从 模板 新 建 ”命令 图 11-27 基于 模板 生成 的 网 页 


会 


片 
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从 图 11-27 可 以 看 到 新 建 的 文档 内 容 与 保存 的 模板 一 样 ， 但 只 有 已 定义 的 可 编辑 区 域 可 以 修改 ， 其 
区 域 则 处 于 锁定 状态 。 

7. 修改 可 编辑 区 域 的 内 容 

选中 可 编辑 区 域 icon 中 的 图 片 ， 按 Delete 键 删 除 。 然 后 执行 “插入 ”| “图像 ”命令 ,插入 需要 的 图 
， 效 果 如 图 11-21 所 示 。 根 据 需要 ， 还 可 以 修改 可 编辑 区 域 content 的 文本 。 

8. 保存 文件 

执行 “文件 ”| “保存 ”命令 ， 在 弹出 的 对 话 框 中 输入 文件 名 称 ， 然 后 单 击 “ 保 存 ”按钮 。 


昌 教 你 一 招 : 如 果 希 望 将 模板 中 的 某 个 可 编辑 区 域 变 为 锁定 区 域 ， 可 以 在 “设计 ”视图 中 先 
中 要 删除 的 可 编辑 区 域 ， 然 后 执行 “工具 ”|“ 模 板 ”|“ 删 除 模板 标记 ”菜单 命令 ， 即 可 将 可 编辑 区 
域 变 为 不 可 编辑 区 域 。 
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如 


.3.3 ”重复 区 域 
重复 区 域 是 可 以 在 基于 模板 生成 的 页 面 中 复制 任意 次 数 的 模板 部 分 ， 通 常用 于 表格 。 
1. 插入 重复 区 域 


选择 要 设置 为 重复 区 域 的 网 页 元 素 ， 或 将 插入 点 放置 在 要 插入 重复 区 域 的 位 置 ， 执 行 以 下 操作 之 一 ， 
图 11-28 所 示 的 “新 建 重 复 区 域 ”对 话 框 : 

9 执行 “插入 ”| “模板 ”| “重复 区 域 ” 命 令 。 

9 在 文档 窗口 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 执行 “模板 ”|“ 新 建 重复 区 域 ”命令 。 

9 在 “模板 ”插入 面板 上 单 击 “ 重 复 区 域 ”按钮 ， 如 图 11-29 所 示 。 

在 “名 称 ”文本 框 中 输入 重复 区 域 的 名 称 ( 不 能 使 用 特殊 字符 )， 单 击 “ 确 定 ” 按 钮 即 可 插入 重复 区 
， 如 图 11-30 所 示 。 重 复 区 域 项 部 显示 “重复 : content”"，content 为 指定 的 名 称 。 


es 


图 11-28 选择 “重复 区 域 ”命令 图 11-29 “新 建 重复 区 域 ”对 话 框 图 11-30 ”插入 的 重复 区 域 content 


注意 : 重复 区 域 不 是 可 编辑 区 域 。 若 要 使 重复 区 域 中 的 内 容 可 编辑 ， 必 须 在 重复 区 域内 插入 
可 编辑 区 域 。 相 关 操 作 可 参见 11.3.1 节 的 操作 。 
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2. 生成 重复 项 


打开 “模板 ”面板 ， 在 模板 上 单 击 鼠标 右键 ， 从 弹出 的 快捷 菜单 中 选择 “从 模板 新 建 ”命令 ， 新 
建 一 个 文档 ， 如 图 11-31 所 示 。 文 档 右 上 角 显 示 使 用 的 模板 名 称 ， 且 重复 区 域 顶 端 出 现 了 一 排 按钮 


二 


神 板 :定义 重 夏 区 博 


图 11-31 基于 模板 生成 的 页 面 


N+: 添加 项 ， 用 于 添加 一 个 重复 项 ， 如 图 11-32 所 示 。 


~ 


图 11-32 添加 一 个 重复 项 


9 写 : 删除 项 ， 用 于 删除 当前 选中 的 重复 项 。 


得 / 提示: 重复 区 域内 添加 了 可 编辑 区 域 时 ， 单 击 该 按钮 可 直接 删除 一 个 重复 项 ; 如 果 没有 可 


编辑 区 域 ,将 弹出 如 图 11-33 所 示 的 对 话 框 。 提 示 用 户 要 先 单 击 可 编辑 区 域 , 才 能 删除 指定 的 重复 项 ， 
否则 不 能 删除 。 


Dreamweaver 


和。 一 个 重 遇 ,站 训 Ri 和 ,类 二 "出 


六 证 


图 11-33 提示 对 话 框 
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9 本 二: 用 于 调整 指定 重复 区 域 的 位 置 。 要 使 用 该 按钮 ， 必 须 先 在 重复 区 域内 添加 可 编辑 区 域 ， 如 
图 11-34 所 示 。 


:ontent +-" 国 


pie 


图 11-34 调整 重复 项 的 位 置 


11.3.4 上 机 练习 一 一 定义 嵌 套 模板 


嵌 套 模板 是 指 基于 一 个 原始 模板 生成 的 新 模板 ， 它 进一步 定义 站 点 中 部 
分 特定 页 面 的 可 编辑 区 域 ， 可 以 定义 精确 的 布局 。 对 原始 模板 所 做 的 更 改 将 
在 嵌 套 模板 中 自动 更 新 ， 并 在 所 有 基于 原始 模板 和 谍 套 模板 生成 的 文档 中 自动 
更 新 。 


只 入 习 日 标 


通过 前 面 对 基础 知识 的 学 习 ， 结 合 本 节 的 练习 实例 ， 熟 练 掌握 模板 的 创建 方法 ， 以 及 添加 可 编辑 区 
域 和 重复 区 域 的 操作 ， 加 深 对 嵌 套 模板 和 重复 表格 的 理解 。 


11-3 上 机 练习 一 一 定义 
翌 套 模板 


/设计 思路 

首先 基于 一 个 已 创建 的 模板 创建 一 个 新 文档 ， 然 后 在 可 编辑 区 域 中 定义 一 个 重复 表格 和 一 个 可 编辑 
区 域 ; 接 下 来 使 用 “保存 ”命令 保存 炭 套 模板 ; 最 后 基于 披 套 模板 生成 一 个 新 的 网 页 ， 修 改 重复 区 域 和 可 
编辑 区 域 的 内 容 ， 如 图 11-35 所 示 。 


时 
Pe | 


图 11-35 基于 嵌 套 模板 生成 的 网 页 
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户 鸭 操作 步骤 

1. 基于 原始 模板 新 建 一 个 文档 

打开 “模板 ”面板 , 在 模板 列表 中 选中 一 个 模板 , 然后 单 击 鼠 标 右 键 , 在 弹出 的 快捷 菜单 中 选择 “从 
模板 新 建 ” 命 令 ， 如 图 11-36 所 示 。 

生成 的 文件 ， 如 图 11-37 所 示 。 


ray 


ot 


刷新 站 点 列表 (R) 
重建 站 点 列表 


图 11-36 选择 “从 模板 新 建 ”命令 


2. 修改 可 编辑 区 域 

删除 可 编辑 区 域 text 中 的 占 位 文本 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 , 设 
置 表格 行 数 为 3， 列 为 1， 表格 宽度 为 360 像素 ， ra 单元 格 边 距 
和 单元 格 间 距 均 为 2， 无 标题 

3. 插入 重复 表格 

将 鼠标 指针 放 在 第 1 行 单元 格 中 ,在 “模板 "面板 上 单 击 “ 重 复 表格 "按钮 ， 
如 图 11-38 所 示 。 弹 出 一 个 对 话 框 ， 提 示 用 户 Dreamweaver CC 2018 将 会 自 
动 将 文档 转换 为 模板 。 单 击 “ 确 定 ” 按 钮 ， 弹 出 “插入 重复 表格 ”对 话 框 

4. 设置 重复 表格 的 参数 

设置 行 数 为 2， 列 为 4， 宽 度 为 00%， 边 框 为 1; 重复 起 始 行 为 2， 结 束 行为 2， 区 域名 称 为 list， 如 
图 11-39 所 示 。 单 击 “ 确 定 ” 按 钮 ， 即 可 插入 重复 表格 ， 如 图 11-40 所 示 


| 


图 11-38 选择 “重复 表格 ”命令 


播 入 重生 去 格 


模板 < nay| 


a EditRegion2 BE om Edithesiond 
mw 一 王 


图 11-40 插入 的 重复 表格 


图 11-39 “插入 重复 表格 ”对 话 框 
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晶 提示 : 与 重复 区 域 不 同 ， 插 入 重复 表格 时 ， 会 自动 在 每 个 单元 格 中 插入 一 个 可 编辑 区 域 。 
用 户 可 以 用 编辑 表格 的 方法 编辑 重复 表格 。 


5. 插入 可 编辑 区 域 

将 鼠标 指针 定位 在 第 2 行 单元 格 中 ， 在 “属性 ”面板 上 设置 单元 格 内容 水 平 “ 居 中 对 齐 "， 
端 ”, 然后 执行 “插入 ”|“ 模 板 ”|“ 可 编辑 区 域 ” 命 令 , 在 弹出 的 对 话 框 中 输入 名 称 为 content， 
定 ” 按 钮 插入 可 编辑 区 域 ， 如 图 11-41 所 示 。 

6. 插入 图 片 


将 鼠标 指针 定位 在 第 2 行 单元 格 中 ,在 “属性 ”面板 上 设置 单元 格 内 容 水 平 “ 居 中 对 齐 "， 垂 直 “ 顶 
端 ”， 然 后 执行 “插入 ”|“ 图 像 ”命令 ， 插 入 一 张 图 片 ， 如 图 11-42 所 示 。 


ant 


生生: ist he i 本 村 机 ma 

a a a 入 | 
m2 TY a 

| fs Pine aaaee § ensp iin | 


ms wf 
nt 


图 11-41 插入 可 编辑 区 域 图 11-42 ”插入 图 片 


7. 保存 谋 套 模板 


执行 "文件 "| "保存 "命令 ,弹出 “另存 模板 "对话 框 ,如 图 11-43 所 示 。 输 入 模板 名 称 (page) 后 单 击 “ 保 
存 ” 保 存 文档 。 此 时 可 以 看 到 原始 模板 中 的 可 编辑 区 域 标签 变 为 黄色 ， 如 图 11-44 所 示 。 


另存 模 板 


模板 may “ 


:it 0 二 可 站 
aaaiaa ausave iva a E 
ma) rr fe 


图 11-43 “另存 模板 ”对 话 框 图 11-44 嵌 套 模板 


8. 基于 庶 套 模板 生成 网 页 
打开 “模板 " 面板 ,在 上 一 步 保存 的 嵌 套 模板 上 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “从 模板 新 建 ” 
命令 ,新建 并 打开 一 个 模板 文件 ， 如 图 11-45 所 示 。 


图 11-45 基于 谤 套 模 板 生 成 的 网 页 
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9. 编辑 重复 表格 的 内 容 
在 重复 表格 的 各 个 单元 格 中 输入 内 容 。 单 击 “ 添 加 项 ”按钮 二 ， 将 生成 新 的 一 行 单 元 格 ， 如 图 11-35 
所 示 。 单 击 过 二 按钮 ， 将 调整 行 的 顺序 ， 而 不 是 列 的 顺序 。 


站 提示 : 由 于 在 “插入 重复 表格 ”对 话 框 中 设置 重复 的 起 始 行为 2， 结束 行 也 为 2， 所 以 每 次 
重复 的 是 一 行 ， 而 不 在 重复 范围 内 的 表格 行 不 可 编辑 ， 如 本 例 中 的 第 1 行 。 如 果 要 编辑 该 行 ， 应 在 
模板 中 进行 修改 。 


11.4 使 用 模板 


创建 模板 的 主要 目的 是 使 用 模板 创建 具有 相同 外 观 及 部 分 内 容 相同 的 文档 ， 使 站 点 风格 统一 。 修 改 
模板 中 的 内 容 ， 基 于 模板 生成 的 所 有 网 页 可 实现 自动 更 新 。 此 外 ， 用 户 还 可 以 根据 需要 将 文档 从 模板 中 
分 离 ， 对 文档 进行 单独 修改 ， 此 时 该 文档 不 会 随 模 板 的 修改 而 自动 更 新 
11.4.1 基于 模板 创建 网 页 

使 用 模板 创建 网 页 有 两 种 方式 : 从 模板 新 建文 档 、 为 现 有 文档 应 用 模板 。 本 节 将 分 别 对 这 两 种 方式 
进行 说 明 。 

1. 从 “模板 ”面板 新 建 

本 章 前 面 讲述 的 例子 都 是 使 用 这 种 方式 创建 新 文档 ,打开 “模板 "面板 ,在 需要 的 模板 上 单 击 鼠 标 右键 ， 
然后 在 弹出 的 快捷 菜单 中 选择 “从 模板 新 建 ” 命 令 ， 如 图 11-46 所 示 。 即 可 新 建 一 个 网 页 并 在 文档 窗口 
中 打开 。 

2. 使 用 “新 建文 档 ” 对 话 框 创建 

执行 “文件 ”|“ 新 建 ”命令 ,打开 “新 建文 档 ” 对 话 框 ， 如 图 11-47 所 示 


网上 8 重 板 


外 二 列表 [R) 
重 过 站 上 列表 
新 建 模板 (W) 


[Casa 下 


二 名 (6 


当 稳 柏 改 开拓 新 页面 (U) 


应 用 (A) 


图 11-46 “从 模板 新 建 ”网 页 图 11-47 “新 建文 档 ” 对 话 框 
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和 类 别 : 选择 “网 站 模板 ”。 

和 a 站 点 : 在 下 拉 列 表 框 中 选择 要 应 用 的 模板 所 在 的 站 点 。 

和 站 点 的 模板 : 在 下 拉 列 表 框 中 选择 需要 的 模板 文件 ， 右 侧 将 显示 模板 的 缩 略 图 。 

和 当 模 板 改 变 时 更 新 页 面 : 选中 该 复 选 框 ， 当 模板 变动 时 ,会 自动 更 新 由 该 模板 生成 的 所 有 网 页 
文件 。 

Y 创建 : 单 击 该 按钮 ， 即 可 基于 指定 的 模板 创建 一 个 新 文档 。 


11.4.2 上 机 练习 一 一 应 用 模板 到 页 


< 生 习 目标 


本 节 介 绍 使 用 模板 创建 网 页 的 另 一 种 方法 ， 为 已 编辑 好 的 文档 应 用 模板 。 11-4 上 机 练习 一 一 应 


通过 实例 加 深 对 模板 和 模板 元 素 的 理解 ， 掌 握 为 网 页 套用 模板 ， 以 及 处 理 不 一 用 模板 到 页 
致 的 区 域名 称 的 方法 。 
设计 电路 


首先 打开 一 个 已 编辑 好 的 HTML 文件 ， 使 用 “应 用 模板 到 页 ”命令 为 网 页 套用 模板 ， 然 后 通过 
设置 “不 一 致 的 区 域名 称 ” 对 话 框 ， 将 网 页 中 的 区 域 与 模板 中 的 可 编辑 区 域 对 应 起 来 ， 最 终 效果 如 
图 11-48 所 示 。 


和 操作 步 可 
1. 打 开 文件 
执行 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 个 已 编辑 好 的 HTML 文件 ， 如 图 11-49 所 示 。 


gy 神山 篇 一 走 近视 
gp 这 就 是 稻城 吗 ? 它 的 美 在 哪里 呢 ? 带 着 这 要 问题 ， 侠 访 了 亚丁 人 社区 的 雪 狼 子 问 清 了 
静 险 风声 基本 的 浏 览 绒 路 后， 我 外 和 的 姓 十 了 ， 在 海 拓 3800 米 的 地 方 ， 和 芝 然 托 玉 特别 天仙 。 
仙 力 日 和 只 珠 湖 


-权时 


图 11-48 ”套用 模板 的 效果 图 11-49 初始 文件 效果 


2. 选择 要 应 用 的 模板 

执行 “工具 ”|“ 模 板 ”|“ 应 用 模板 到 页 ”命令 ,打开 如 图 11-50 所 示 的 “选择 模板 ”对 话 框 。 
在 “站 点 ”下 拉 列 表 中 选择 要 应 用 的 模板 所 在 的 站 点 。 

在 “模板 ”列表 中 选择 需要 的 模板 。 
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当 模 板 改变 时 更 新 页 面 (U 


图 11-50 “选择 模板 ”对 话 框 


好 注意 : 选择 的 模板 应 定义 有 可 编辑 区 域 ， 否 则 不 能 套用 模板 。 


选中 对 话 框 底部 的 “ 当 模 板 改变 时 更 新 页 面 ” 复 选 框 。 


3. 解析 不 一 致 的 区 域名 称 
单 击 “ 选 定 ”按钮 ,如 果 文 档 中 的 内 容 不 能 自动 指定 到 模板 区 域 , 会 弹出 如 图 11-51 (a ) 所 示 的 “不 
一 致 的 区 域名 称 ”对 话 框 ， 提 示 用 户 此 文档 中 的 某 些 区 域 在 新 模板 中 没有 相应 区 域 。 
不 到 的 区 类 名 徐 i | ”区 可 


图 11-51 “不 一 致 的 区 域名 称 ” 对 话 框 


选中 列表 中 不 一 致 的 区 域名 称 ， 对 话 框 下 方 的 “将 内 容 移 到 新 区 域 ”下 拉 列 表 变 为 可 用 状态 。 分 
别 从 下 拉 列 表 中 选中 layout01.dwt 模板 中 定义 的 可 编辑 区 域名 称 content 和 head。 此 时 ， 不 一 致 的 区 域 
名 称 列表 中 , 选 定 的 区 域 的 状态 由 “< 未 解析 >” 变 为 指定 的 区 域名 称 content 和 head, 如 图 11-51 (b ) 


所 示 。 


息 / 提示 : 如 果 选 择 “ 不 在 任何 地 方 ”选项 ， 则 该 区 域 的 内 容 将 从 文档 中 删除 。 单 击 “用 于 所 
有 内 容 ” 按 钮 ， 可 将 所 有 未 解析 的 内 容 移 到 选 定 的 区 域 。 
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4. 套用 模板 
单 击 “ 确 定 ”按钮 应 用 模板 。 应 用 模板 前 、 后 的 页 面 效 果 如 图 11-48 所 示 。 


和 嫩 注意 : 这 将 模板 应 用 于 现 有 文档 时 ， 该 模板 将 用 其 标准 化 内 容 葵 换 文档 内 容 。 所 以 将 模板 应 
用 于 页 面 之 前 ， 最 好 备份 页 面 的 内 容 。 


此 外 ,用 户 也 可 以 直接 在 “模板 ”面板 中 用 鼠标 指针 拖 动 模板 到 要 应 用 模板 的 文档 中 ,或 单 击 “ 模 板 ” 
底部 的 “应 用 ”按钮 ， 将 指定 的 模板 应 用 到 当前 编辑 的 文档 。 


11.4.3 “分 离 模板 


通过 模板 创建 文档 之 后 ， 文 档 和 模板 就 密 不 可 分 了 ， 只 要 修改 模板 ， 就 可 以 自动 对 文档 进行 更 新 ， 
通常 将 这 种 文档 称 作 附着 模板 的 文档 。 如 果 和 希望 能 随意 地 编辑 应 用 了 模板 的 文件 ,可 以 断 开 与 模板 的 链接 ， 
即 从 模板 中 分 离 文 档 。 
打开 应 用 了 模板 的 文档 , 执行 “工具 ”|“ 模 板 ”|“ 从 模板 中 分 离 ” 命 令 , 即 可 将 文档 与 模板 中 分 离 ， 
如 图 11-52 所 示 。 
从 图 11-52 可 以 看 出 ,文档 与 模板 分 离 之 前 ， 在 页 面 中 可 以 看 到 可 编辑 区 域 的 名 称 和 标识 ， 右 上 角 
可 以 看 到 基 模 板 的 名 称 ， 如 图 11-52 (a ) 所 示 。 文 档 与 所 附 模板 分 离 之 后 ， 该 文档 变 为 一 个 普通 文档 ， 
文档 中 不 再 有 模板 标记 ， 如 图 11-52 (b ) 所 示 。 
现 书 有 辐 ” 
半 雷 方 塘 一 鉴 开 
Ry ee 
春日 
胜 日 寻 芳 泗水 演 
ER 


春日 


胜 日 寻 芳 泗水 滨 
无 边 光景 一 时 新 


图 11-52 ”文档 从 模板 中 分 离 前 、 后 的 效果 
11.4.4 ”修改 模板 并 更 新 站 点 


1. 修改 模板 

在 “模板 ”面板 中 双击 要 编辑 的 模板 名 称 ， 或 选中 模板 之 后 ， 单 击 “ 模 板 ” 面 板 底部 的 “编辑 ” 按 
钮 贺 ， 如 图 11-53 所 示 ， 即 可 打开 模板 进行 编辑 。 

保存 编辑 过 的 模板 时 ，Dreamweaver CC 2018 会 弹出 一 个 对 话 框 ， 询 问 是 否 修改 应 用 该 模板 的 所 有 
网 页 ， 如 图 11-54 所 示 。 

单 击 “ 更 新 ”按钮 ， 即 可 弹出 如 图 11-55 所 示 的 “更 新 页 面 ”对 话 框 ， 自 动 更 新 所 有 基于 当前 模板 
生成 的 嵌 套 模板 和 网 页 ， 并 在 状态 栏 显 示 更 新 的 状态 信息 。 
2. 更 新 站 点 
和 户 也 可 以 手动 更 新 站 点 中 的 页 面 。 
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图 11-53 ”修改 模板 图 11-54 “更 新 模板 文件 ”对 话 框 


更 新 页 面 Ex 
文件 使 用 


口 遍 页 目 (U 
模板 (7) 


口 显示 记录 (H) 


图 11-55 “更 新 页 面 ”对 话 框 1 
修改 模板 之 后 ， 执 行 “ 工 具 ”|“ 模 板 ”|“ 更 新 页 面 ”命令 ， 如 图 11-56 所 示 的 “更 新 页 面 ”对 话 框 。 
C2] 


更 新 页 面 


口 显示 记录 (H) 


图 11-56 “更 新 页 面 ”对 话 框 2 


YN 查看 : 用 于 选择 页 面 更 新 的 范围 
全 整个 站 点 : 对 指定 的 站 点 中 所 有 的 文档 进行 更 新 
全 文件 使 用 : 对 站 点 中 所 有 使 用 指定 模板 的 文档 进行 更 新 。 不 使 用 该 模板 的 文档 不 会 被 更 新 
Y 更 新 : 指定 要 更 新 的 项 目 。 
他 模板 : 更 新 站 点 中 的 模板 及 基于 模板 生成 的 所 有 页 面 
全 库 项 目 : 更 新 站 点 中 的 库 项 目 及 所 有 使 用 指定 库 项 目的 页 面 。 
单 击 “ 开 始 ” 按 钮 ， 即 可 更 新 指定 站 点 中 的 模板 和 网 页 ， 并 在 “状态 ” 栏 显 示 更 新 的 状态 信息 ， 如 
图 11-57 所 示 
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口 显 示 记 录 (H 


图 11-57 “更 新 页 面 ”对 话 框 3 


(以 知识 拓展 
更 新 Web 字体 脚本 标记 
Dreamweaver CC 2018 支持 Adobe Edge 字体 ， 在 页 面 中 使 用 Edge 字体 时 ， 将 添加 额外 的 脚本 
标签 以 引用 JavaScript 文件 。 显 示 页 面 时 ， 从 Creative Cloud 服务 器 下 载 字体 ， 即 使 用 户 计算 机 上 有 
该 字体 也 会 下 载 。 
如 果 页 面 使 用 了 外 部 样式 表 中 定义 的 Edge 字体 ， 更 新 页 面 时 ， 应 选中 “Web 字体 脚本 标记 ”选项 ， 
以 便 更 新 Web 字体 脚本 标记 。 


11.5 ”创建 与 使 用 库 项 目 


在 同一 个 站 点 中 ， 网 页 文件 中 除了 相同 的 外 观 ， 还 有 一 些 需 要 经 常 更 新 
的 页 面 元 素 也 是 相同 的 ， 例如 版 权 声 明 、 实 时 消息 、 公 告 内 容 等 。 这 些 内 容 
只 是 页 面 中 的 一 小 部 分 ， 在 各 个 页 面 中 的 摆 放 位 置 可 能 也 不 同 ， 但 内 容 却 是 

- 致 的 。 在 Dreamweaver CC 2018 中 ， 可 以 将 这 种 内 容 保存 为 一 个 库 项 目 ， 

在 需要 的 地 方 插入 ， 并 能 在 使 用 库 项 目的 文件 中 自动 更 新 

执行 “窗口 ”|“ 资 源 ” 命 令 ， 调 出 “资源 ”面板 。 单 击 “ 资 源 ” 面 板 左 
侧 的 “ 库 ” 图 标 按钮 E 国 ， 即 可 切换 到 “ 库 ” 面 板 ， 如 图 11-58 所 示 。“ 库 ” 面 
板 上 半 部 分 显示 当前 选中 的 库 项 目的 预览 图 ; 下 半 部 分 则 是 当前 站 点 中 所 有 
库 项 目的 列表 。 

3 图: 刷新 站 点 列表 ， 更 新 库 项 目 

3 图 : 在 库 列 表 中 新 建 一 个 库 项 目 

3 国 : 编辑 当前 在 库 列表 中 选中 的 库 项 目 

3 贺 : 删除 当前 在 库 列表 中 选择 的 库 项 目 图 11-58 “ 库 ” 面板 


侣 注意 : 删除 库 项 目 是 从 本 地 站 点 的 Library 目录 中 删除 相应 的 库 项 目 文件 ， 删 除 后 无 法 恢复 。 
但 已 经 插入 到 文档 中 的 库 项 目 内 容 并 不 会 被 删除 。 如 果 不 小 心 误 删 某 个 库 项 目 ,可 以 使 用 “重新 创建 ” 
命令 恢复 以 前 的 库 项 目 。 有 关 “ 重 新 创建 ”的 操作 参见 11.5.4 节 的 讲解 。 


y 轩 本 到 将 在 库 列表 中 选中 的 库 项 目 插入 到 当前 文档 中 
11.5.1 创建 库 项 目 


在 Dreamweaver CC 2018 中 ， 可 以 从 无 到 有 创建 一 个 空白 的 库 项 目 ， 也 可 以 将 任何 页 面 元 素 创建 为 
库 项 目 。 本 节 将 分 别 介绍 这 两 种 方法 。 
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1. 创建 空白 库 项 目 
单 击 “ 库 ”面板 底部 的 “新 建 库 项 目 ” 按 钮 国 ， 库 项 目 列表 中 将 显示 一 个 新 建 的 项 目 ， 且 名 称 处 于 
可 编辑 状态 ， 如 图 11-59 所 示 。 输 入 文件 名 称 , 按 Enter 键 , 或 单 击 面板 其 他 区 域 ， 即 可 新 建 一 个 库 项 目 。 


嫩 注意 : 站 点 中 所 有 的 库 项 目 都 应 保存 在 站 点 根 目 录 下 的 Library 文件 夹 中 ， 以 .bi 为 扩展 名 。 
不 应 在 该 文件 夹 中 添加 任何 非 .bi 的 文件 。 


2. 增加 对 象 到 库 

在 文档 窗口 中 选中 要 创建 为 库 项 目的 内 容 ( 图 11-60 )， 单 击 “ 库 ”面板 底部 的 “新 建 库 项 目 ” 按 钮 
图 ， 或 者 执行 “工具 ”|“ 库 ”|“ 增 加 对 象 到 库 ” 命 令 ( 图 11-61 ) ， 然 后 输入 库 项 目 名 称 即 可 。 创 建 的 
库 项 目 在 文档 中 以 黄色 高 亮 显 示 ， 如 图 11-62 所 示 


图 11-59 ”新建 库 项 目 图 11-60 ”选中 页 面 元 素 


编译 (M) m 
代码 3 器 ( 〇 - Ctrl+Ak+N 
标签 库 (U-- 

将 JavaScript 外 置 () 

清理 HTMLU- 

清理 Word 生成 的 HTML(U). 

清理 Web 字体 让 本 标签 ( 当前 页 面 ) (N) | 
拼写 检查 (K skf | 


答 理 闻 体 (M) 一 

[me mr 
模板 (E) » 更 新 当前 页 (C) 
命令 (D) » 更 新 页 面 (P) 一 


HTMLH) | 
| 


图 11-61 选择 “增加 对 象 到 库 ” 命 令 


Css 四 


图 11-62 ”创建 的 库 项 目 
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站 提示 : 如 果 选 中 的 页 面 内 容 定 义 了 样式 , 会 弹出 
图 11-63 所 示 的 对 话 框 ， 提 示 用 户 没有 同时 复制 样式 表 信息 ， 
所 选 内 容 放 入 其 他 文档 中 时 ， 效 果 可 能 不 同 。 单 击 “ 确 定 ” 按 
钮 关闭 对 话 框 。 在 “代码 ”视图 中 将 页 面 内 容 使 用 的 样式 代码 
复制 到 库 文件 的 “代码 ”视图 中 。 图 11-63 ”提示 对 话 框 


11.5.2 ”使 用 库 项 目 


在 页 面 中 使 用 库 项 目 ， 实 际 上 是 将 库 项 目的 一 个 副本 以 及 对 该 库 项 目的 引用 一 起 插入 到 文档 中 。 

将 插入 点 定位 在 “设计 ”视图 中 要 插入 库 项 目的 位 置 ， 在“ 库 ”面板 中 选择 要 插入 的 库 项 目 ， 然 后 
单 击 “ 库 ”面板 底部 的 国 本 吉 扩 钮 ; 或 直接 将 库 项 目 从 “ 库 ” 面 板 中 拖 到 文档 窗口 中 。 

此 时 ， 文 档 中 会 出 现 库 项 目 所 表示 的 文档 内 容 ， 同 时 以 淡 黄 色 高 亮 显 示 ， 表 明 它 是 一 个 库 项 目 ， 效 
果 如 图 11-64 所 示 。 


图 11-64 在 文档 中 插入 库 项 目的 效果 


&) 教 你 一 招 : 在 “文档 ”窗口 中 ， 库 项 目 是 作为 一 个 整体 出 现 的 ， 不 能 对 库 项 目 中 的 局 部 内 
容 进 行 编辑 。 如 果 项 望 只 添加 库 项 目 内 容 而 不 希望 它 作 为 库 项 目 出 现 ， 可 以 按 住 Ctrl 键 的 同时 ， 将 
库 项 目 从 “ 库 ” 面 板 中 拖 动 到 “文档 ”窗口 中 。 此 时 插入 的 内 容 以 普通 文档 的 形式 出 现 ， 可 以 对 其 
进行 任意 编辑 ， 如 图 11-65 所 示 。 


图 11-65 ” 仅 插 入 库 项 目的 内 容 
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守 区 并 入 门 吐 滞 襄 


11.5.3 ”上 机 练习 一 一 在 网 页 中 添加 版 权 声 明 


< 穆 习 日 标 


通过 前 面 操作 方法 的 讲解 ， 结 合 本 节 练 习 实 例 进一步 掌握 新 建 库 项 目 ,以 ”11-5 上 机 练习 一 一 在 网 


及 将 库 项 目 应 用 到 网 页 中 的 操作 步 又。 页 中 添加 版 权 声 明 
和 /设计 思路 


首先 使 用 “新 建 库 项 目 ” 命 令 创 建 一 个 空白 的 库 文件 ， 然 后 双击 打开 文件 ， 通 过 插入 Div 布局 块 、 
设置 CSS 样式 定义 库 文件 的 显示 外 观 ， 接 下 来 在 布局 块 中 添加 图 像 和 文本 ， 最 后 打开 一 个 网 页 文件 ， 将 
制作 好 的 库 项 目 插入 文档 中 ， 如 图 11-66 所 示 


长 ， 树 苗 很 自 多 - ， 只 要 在 个 1 
长 成 百年 的 大 树 就 不 成 问题 了 。” 


种 树 的 人 语重心长 地 说 : “如 果 我 每 天 都 来 流 一 定 里 的 水 ， 树 苗 就 会 养 成 依 
埋 89 心 ， 祖 就 会 浮生 在 地 表 上 ,无 法 深入 地 底 ， 一 旦 我 停止 江水， 树苗 会 枯萎 得 
更 多 。 幸而 可 以 存活 的 树 菌 ,过 到 插 风暴 十 也 是 一 哆 就 倒 了 。” 

植树 者 言 ， 使 我 非常 感动 ， 想 到 不 只 是 树 ， 人 也 是 一 样 * 在 不 确定 中 , 我们 
会 养 成 抽 立 自主 的 心 ， 不 会 依赖 ， 我 们 会 把 很 少 的 养分 转化 为 巨大 的 能 量 ， 努 力 
全 折 。 


图 11-66 插入 库 项 目 


记 胡 操作 步骤 
~“ 文件 ”面板 ， 在 站 点 下 拉 列 表 中 选择 要 创建 库 项 目的 站 点 。 打 开 “ 资 源 ” 面 板 ， 单 击 
“ 库 ” 图 标 按钮 国 切换 到 “ 库 ” 面 板 ， 然 后 单 击 面板 底部 的 “新 建 库 项 目 ” 按 钮 较 , 输入 库 项 目 名 称 
copyright， 如 图 11-67 所 示 
2. 创建 布局 块 
在 “ 库 ” 面板 中 双击 上 一 步 创建 的 库 项 目 打 开 库 文件 ,将 指针 定位 在 文档 窗口 中 ,执行 “插入 ”| “Div” 
命令 ， 在 弹出 的 “插入 Div” 对 话 框 中 设置 布局 块 IJD 为 footer， 如 图 11-68 所 示 


图 11-67 新 建 库 项 目 图 11-68 “插入 Div” 对 话 框 
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/提示 : 编辑 库 项 目 时 ,“ 页 面 属性 ”对 话 框 不 可 用 ,因为 库 项 目 中 不 能 包含 body 标记 或 其 属性 。 


3. 定义 布局 块 外 观 样式 
单 击 “ 新 建 CSS 规则 ”按钮 ， 在 弹出 的 “新 建 CSS 规则 ”对 话 框 中 轩 e 时 到 
击 “ 确 定 ” 按 钮 ， 弹 出 “#footer 的 CSS 规则 定义 ”对 话 框 。 
在 “类 型 ”分 类 中 设置 字号 ( Font-size ) 为 12px, 行 高 ( Line-height ) 
为 120%; 
在 “区 块 ”分 类 中 设置 文本 对 齐 方式 ( Text-align ) 为 “center ; 


和 


著 


在 “ 方 框 ”分 类 中 设置 宽度 ( Width ) 为 500px; em em 
单 击 “ 应 用 ”和 “确定 ”按钮 关闭 对 话 框 。 此 时 打开 “CSS 设计 器 "面板 ， | 
可 以 看 到 如 图 11-69 所 示 的 属性 设置 。 text-algn 


回 更 多 


4. 编辑 库 文件 内 容 
删除 布局 块 footer 的 占 位 文本 ， 执 行 “ 插 入 ”|“ 图 像 ” 命 令 ， 在 弹 


出 的 对 话 框 中 选择 要 插入 的 分 隔 图 ， 图 11-69 设置 布局 块 的 CSS 属性 
将 鼠标 指针 置 于 分 隔 图 右 侧 ， 按 下 Shift + Enter 组 合 键 插入 一 个 软 回 
车 ， 然 后 输入 需要 的 版 权 声 明文 本 。 同 样 的 方法 ， 另 起 一 行 ， 输 入 邮箱 地 址 ， 如 图 11-70 所 示 。 


5. 设置 电子 邮件 链接 

选中 上 图 中 的 邮箱 地 址 ， 在 “属性 ”面板 的 “链接 ”文本 框 中 输入 mailto:vivi@website.com， 此 时 的 
页 面 效果 如 图 11-71 所 示 。 

6. 保存 库 文件 

执行 “文件 ”|“ 保 存 ” 菜 单 命令 保存 库 文件 

7. 应 用 库 项 目 

a 文件 ”| “打开 ”命令 ,打开 一 个 要 插入 版 权 声明 的 网 页 ,并 将 指针 放 在 插入 点 。 打 开 “ 库 ”面板 ， 
选中 上 一 步 保 存 的 库 项 目 ， 然 后 单 击 “ 插 入 ”按钮 ， 如 图 11-72 所 示 。 即 可 看 到 插入 的 库 项 目 以 淡 黄色 
高 亮 显 示 ， 如 图 11-66 所 示 。 


图 11-71 添加 电子 邮件 链接 的 效果 图 11-72 插入 库 项 目 


8. 保存 文件 
执行 “文件 ”| “另存 为 ”菜单 人 


: 
仿 


， 保 存 文件 。 
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11.5.4 ”编辑 库 项 目 
在 文档 窗口 中 选择 一 个 库 项 目 后 ,选择 “窗口 ” |“ 属性 ”命令 ,可 以 看 到 如 图 11-73 所 示 的 “属性 ”面板 。 


图 11-73 库 项 目的 属性 面板 


环 


9 打开 : 单 击 该 按钮 可 以 打开 库 项 目的 源 文件 进行 编辑 。 
9 从 源 文件 中 分 离 : 将 当前 选择 的 内 容 从 库 项 目 中 分 离 出 来 ,这样 可 以 对 插入 到 文档 窗口 中 的 库 项 
目 内 容 进行 修改 。 事 实 上 ， 此 时 页 面 中 的 内 容 已 不 能 称 为 库 项 目 了 。 

在 使 用 该 功能 时 ， 会 弹出 一 个 对 话 框 ， 提 示 用 户 执行 该 操作 后 ， 库 项 目 源 文件 被 改变 时 ， 该 网 页 中 
的 库 项 目 内 容 不 会 自动 更 新 ， 如 图 11-74 所 示 。 如 果 单 击 “ 确 定 ”按钮 ， 即 可 将 当前 选择 的 内 容 与 库 项 
目 分 离 ; 如 果 选 择 “ 取 消 ”按钮 ， 则 取消 操作 。 


| 晶 /) 提示 : 在 将 库 项 目 拖 到 “文档 ”窗口 的 同时 , 按 下 Ctrl 键 ,也 可 以 将 库 项 目 从 源 文件 中 分 离 。 


Y 重新 创建 : 将 插入 的 库 项 目 内 容重 新 生成 库 项 目 文件 。 使 用 该 功能 时 ， 会 显示 一 个 对 话 框 ， 如 
图 11-75 所 示 ， 询 问 用 户 是 否 覆盖 现存 的 库 项 目 。 通 常 在 删除 库 项 目 文件 后 ， 使 用 该 功能 恢复 以 
前 的 库 项 目 文件 。 


Dreamweaver 


图 11-74 ”提示 对 话 框 1 图 11-75 ”提示 对 话 框 2 


&) 提示 : 如 果 重 建 后 的 库 项 目 没有 出 现在 “ 库 ” 面 板 中 ， 可 以 单 击 “ 库 ”面板 底部 的 “刷新 
站 点 列表 ”按钮 图 ， 如 图 11-76 所 示 。 


图 11-76 单 击 “刷新 站 点 列表 ”按钮 
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11.6 ”实例 精 讲 一 一 柳 永 名 作 欣赏 


二 穆 习 日 标 


本 实例 制作 一 个 词 作 欣 赏 网 站 ， 通 过 对 该 实例 的 讲解 ， 使 读者 对 模板 、 可 编辑 区 域 和 库 有 更 加 深入 


的 了 解 ， 并 能 够 牢固 掌握 使 用 模板 和 库 创 建 统一 风格 网 页 的 方法 。 


和 设计 思路 


首先 新 建 一 个 空白 的 HTML 模 板 ,使 用 表格 创建 页 面 的 整体 框架 ,将 词 作 内 容 区 域 设置 为 可 编辑 区 域 ， 


并 将 页 面 保存 为 模板 ， 然 后 制作 库 项 目 插入 到 模板 的 可 编辑 区 域 。 最 后 基 了 


模板 生成 新 的 网 页 ， 并 修改 


词 作 内 容 ， 最 终 效果 如 图 11-77 所 示 。 单 击 导航 文本 ， 则 跳 转 到 一 个 除 词 作 内 容 不 同 ， 其 他 页 面 元 素 均 


相同 的 页 面 。 


户 衣 操作 步 卫 
11.6.1 ”制作 页 面 基本 框架 


1. 新 建 模板 文件 


执行 “文件 ”|“ 新 建 ” 命 令 ， 在 弹出 的 “新 到 


祁 承 名 作 


夜半 乐 


访 云 二 全 天 气 ， 启 入 一时 ， 
生 兴 离 江 潮 。 


于 中 酒 剂 四 站， 一 这 炬 村 ， 孝 行 霜 树 . 
残 E 下 、 注入 鸣 枝 朋 去。 

败 闪 轨 稿 ， 亮 杨 挤 坎 ， 

序 边 两 两 三 三 ， 演 纱 游 女 ， 

游行 客 、 合 著 笑 相 语 。 


到 此 因 仿 ， 颖 六 轻 抽 ， 六 苦难 驻 。 

叹 后 约 本 

收 高 怀 、 空 恨 岁 殊 腿 甩 层 。 

小 泪眼 、 理 理 神 京 忠 ， 断 汐 声 远 长 天 莫 。 


医 可 条 有 Copyright viviSoft 2016-2017 
奸 使 有 现 竺 宫 IE9+ ， 丽 导 分 入 盏 1024x758 有 以上 


W538] : webmaster@website com 


ee 


图 11-77 实例 效果 


vit 


11-6 制作 页 面 基 本 框架 


文档 ”对 话 框 中 选择 文档 类 型 为 “HTML 模板 "， 新 
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建 一 个 空白 的 HTML 模板 文件 。 


2. 设置 页 面 属性 
执行 “文件 ”|“ 页 面 属 性 ”命令 ， 在 “页 面 属 性 ”对 话 框 中 设置 页 面 的 背景 图 像 ; 然后 切换 到 “ 链 


接 ” 页 面 ， 设 置 链接 颜色 为 办 33333， 已 访问 链接 颜色 为 妆 30000， 变 换 图 像 链接 和 活动 链接 颜色 为 
盾 F3300， 仅 在 变换 图 像 时 显示 下 夯 线 ， 如 图 11-78 所 示 。 单 击 “确定 ”按钮 关闭 对 话 框 


PE 


图 11-78 设置 链接 样式 


3. 插入 表格 

执行 “插入 ”|“ 表 格 ” 命 令 ， 在 页 面 中 插入 一 个 3 行 1 列 的 表格 ， 表 格 宽度 为 600 像素 ， 边框 粗细 、 
单元 格 边 距 和 单元 格 间距 均 为 0， 如 图 11-79 所 示 。 选 中 表格 ， 在 “属性 ”面板 上 的 “对 齐 ” 下 拉 列 表 中 
选择 “居中 对 齐 "，ID 为 main 

4. 格式 化 表格 

(1) 创建 样式 表 文 件 。 打 开 “CSS 设计 器 ”面板 , 单 击 “添加 CSS 源 ” 按钮 ,在 弹出 的 下 拉 菜 单 中 选择 
“创建 新 的 CSS 文件 ”命令 。 在 弹出 的 对 话 框 中 单 击 “ 浏 览 ”按钮 ， 输 入 样式 表 文 件 的 名 称 common.css， 
如 图 11-80 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 


[abe 区 本 


创建 新 的 CSS 文件 


图 11-79 设置 表格 参数 图 11-80 ”创建 新 前 CSS 文件 
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(2) 定义 CSS 规则 。 在 “CSS 设计 器 ”面板 中 选择 源 common.css; 单 击 “ 添 加 选择 器 ”按钮 ， 设 置 
选择 器 名 称 为 #main; 然后 在 属性 列表 中 设置 边框 宽 ( width ) 为 30px， 样式 ( style ) 为 solid ( 实 线 ), 颜 
色 (color ) 为 白色 ; 边框 的 圆 角 半径 ( border-radius ) 为 15px; 水 平 (h-shadow ) 和 垂直 (v-shadow ) 阴 
影 为 1px， 模 糊 半径 (blur ) 为 4px， 如 图 11-81 所 示 。 
(3 ) 预览 样式 效果 。 切 换 到 “实时 视图 "， 可 以 看 到 应 用 样式 后 的 表格 效果 如 图 11-82 所 示 。 
5. 格式 化 标题 文本 
(1) 输入 文本 。 选 中 第 1 行 单 元 格 ， 在 “属性 ”面板 上 设置 “高 度 ” 为 100， 然 后 输入 文本 “ 柳 永 
名 作 ” 
(2) 定义 CSS 规则 。 打 开 “CSS 设计 器 ”面板 ， 选 择 源 common.css; 单 击 “ 添 加 选择 器 ”按钮 ， 
设置 选择 器 名 称 为 .topbg; 然后 在 属性 列表 中 设置 背景 图 像 ; 设置 文本 颜色 ( color ) 为 #B42E09， 字 体 
( font-family ) 为 “华文 行 楷 ” ， 字 号 ( font-size ) 为 48px， 居 中 对 齐 ， 如 图 11-83 所 示 


: 30px solid #FFFFFF 


(= Rs = Ma 


图 11-82 格式 化 表格 的 效果 


回 


color 
font-family 


图 11-81 设置 表格 的 CSS 属性 图 11-83 设置 文本 的 CSS 属性 


(3 ) 应 用 样式 。 将 鼠标 指针 放 在 第 1 行 单元 格 中 ,在 “属性 ”面板 上 的 “目标 规则 ”下 拉 列 表 中 
选择 .topbg。 切 换 到 “实时 视图 ”， 页 面 的 预览 效果 如 图 11-84 所 示 。 


祁 永 名 作 


图 11-84 格式 化 单元 格 的 效果 


6. 制作 导航 条 
(1 ) 嵌 套 表格 。 选 中 第 2 行 单元 格 ， 设 置 单元 格 内 容 水 平和 垂直 对 齐 方式 均 为 “居中 ”“ 高 ”为 40， 


起 时 


背景 颜色 为 虹 BD399。 然 后 在 单元 格 中 红 套 一 个 1 行 4 列 ， 宽 度 为 100%， 边框 粗细 、 单 元 格 边 距 和 单 
元 格 间 距 均 为 0 的 表格 ， 如 图 11-85 所 示 。 
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(2 ) 设置 单元 格 属性 。 选 中 嵌 套 表格 ， 在 “属性 ”面板 上 设置 表格 ID 为 nav; 选中 所 有 单元 格 ， 设 
置 背景 颜色 为 白色 ( 丰 FF )， 高 为 30， 如 图 11-86 所 示 


神 永 名 作 


图 11-85 设置 赃 套 表格 的 参数 图 11-86 设置 单元 格 属 性 后 的 效果 


(3 ) 设置 表格 上 、 下 边框 样式 。 打 开 “CSS 设计 器 ”面板 ， 选 择 源 common.css; 单 击 “添加 选择 器 ” 
按钮 ， 设 置 选择 器 名 称 为 #nav; 然后 在 属性 列表 中 设置 上 边框 的 宽度 为 1px， 样 式 为 dashed ( 虚线 )， 颜 
色 为 黑色 (#000 )， 同 样 的 方法 设置 下 边框 的 样式 ， 如 图 11-87 所 示 

(4) 输入 导航 文本 。 在 单元 格 中 依次 输入 导航 文本 ,切换 到 “实时 视图 ”"， 页 面 的 预览 效果 如 
图 11-88 所 示 ， 基 套 表格 的 上 、 下 边框 显示 为 虚线 ， 其 他 边线 不 显示 


图 11-87 设置 上 、 下 廊 框 样式 图 11-88 输入 导航 文本 


为 了 便于 控制 对 齐 格式 ， 词 的 内 容 部 分 放 在 一 个 两 行 一 列 的 表格 中 。 

7. 谋 套 表格 

选中 第 3 行 单元 格 ， 设 置 单元 格 内 容 水 平 对 齐 方式 为 “居中 对 齐 "， 垂 直 对 齐 方式 为 “顶端 "， 然 后 
在 单元 格 中 插入 一 个 2 行 1 列 的 表格 ， 表 格 宽度 为 600 像素 ,边框 粗细 为 0， 单 元 格 边 距 为 20， 单 元 格 
间距 为 0， 如 图 11-89 所 示 。 

8. 设置 标题 样式 

(1 ) 输入 标题 。 选 中 嵌 套 表格 的 第 1 行 ， 设 置 单 元 格 “高 ”为 0， 背景 颜色 为 白色 〈 考 FF )。 然 后 
输入 文本 “ 雨 霖 铃 "。 
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(2 ) 定义 CSS 规则 。 打 开 “CSS 设计 器 ”面板 ,在 “CSS 源 ” 列 表 中 选择 common.css; 单 击 “ 添 加 
选择 器 ”按钮 ,设置 选择 器 名 称 为 .titlefont; 然后 在 属性 列表 中 设置 内 边 距 ( padding ) 为 10px, 字 体 为 “ 隶 
书 ”， 字 号 为 36px， 对 齐 方式 (text-align ) 为 “居中 ”， 如 图 11-90 所 示 


Table 


+ 一 选择 器: itiefont 


图 11-89 恋 套 表格 的 属性 图 11-90 设置 CSS 属性 


(3 ) 应 用 样式 。 选 中 输入 的 标题 文本 , 在 “属性 ”面板 的 “目标 规则 ”下 拉 列 表 中 选择 .tilefont。 此 
时 的 页 面 效 果 如 图 11-91 所 示 


神 永 名 作 


图 11-91 设置 标题 样式 的 效果 


9. 格式 化 文本 
(1) 输入 文本 。 选 中 赃 套 表格 的 第 2 行 ， 设 置 单元 格 内 容 垂直 对 齐 方式 为 “顶端 "， 背 景 颜色 为 
三 BD399， 然 后 输入 诗词 文本 。 


(2 ) 定义 CSS 规则 。 打 开 *CSS 设计 器 "面板 ,在 "CSS 源 ” 列 表 中 选择 common.css; 单 击 “ 添 加 选择 器 ” 
按钮 , 设置 选择 器 名 称 为 .fontstyle; 然后 在 属性 列表 中 设置 内 边 距 ( padding ) 为 10px, 字体 (font-family ) 
为 “新 宋体 ” ,行距 (line-height ) 为 200% ,背景 颜色 ( background-color ) 为 白色 ( 手 FF ), 如 图 11-92 所 示 

(3 ) 应 用 样式 。 选 中 输入 的 文本 内 容 ， 在 “属性 ”面板 的 “目标 规则 ”下 拉 列 表 中 选择 .fontstyle。 
此 时 的 页 面 在 “实时 视图 ”中 的 预览 效果 如 图 11-93 所 示 

10. 保存 模板 

执行 “文件 ”|“ 保 存 ” 命 令 ， 在 弹出 的 对 话 框 中 输入 模板 名 称 famous.dwt。 
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守 区 并 入 门 呈 语言 


变 昱 凌 切 ， 对 长 亭 院 ， 划 十 了 。 
二 大 由 放 无 绩 . 
遇 国 国 日 


padding 


多 情 自 古 伤 高 别 。 
更 到 堪 、 答 消 清 秋 节 ， 


font-family 
line-height 
园 背 时 更 与 何人 说 - 
do ,ll srrrrrr 
所 有 祯 壹 : 列 卫 要 下 又 可 四 规 风 
图 11-92 设置 CSS 属性 图 11-93 ”实例 效果 


11.6.2 ”定义 可 编辑 区 域 

1. 插入 表格 行 [Dhaene 

选中 导航 条 以 下 的 嵌 套 表格 ， 将 指针 放 在 表格 右 侧 ， 单 击 鼠 标 右键 ， 在 弹出 ”11-7 定义 可 编辑 区 域 
的 快捷 菜单 中 选择 “表格 ”|“ 插 入行 或 列 ” 命令 ,在 弹出 的 对 话 框 中 选择 插入 “ 行 ”， 
行 数 为 1， 位 置 为 “所 选 之 下 ”"， 如 图 11-94 所 示 。 单 击 “ 确 定 ”按钮 关闭 对 话 框 ， 即 可 看 到 添加 的 一 行 ， 
如 图 11-95 所 示 

2. 添加 可 编辑 区 

选中 导航 条 下 方 的 嵌 套 表格 , 执行 “插入 ”|“ 模 板 ”|“ 可 编辑 区 域 ”命令 , 弹出 “新 建 可 编辑 区 域 ” 
对 话 框 ， 在 “名 称 ” 文 本 框 中 输入 content， 如 图 11-96 所 示 。 然 后 单 击 “ 确 定 ” 关 闭 对 话 框 


识 搓 走 切 ， 对 长 享 晚 ， 导 辣 初 阮 - 


今 计 汪 酝 何 处 、 
标杆 岩 - 晓 


OHm oako 四 
此 


1 了 


冰 置 ; 〇 所 过 之 上 OA) 
OHitZz 下 四 ) 帮助 


图 11-94 插入 行 图 11-95 插入 的 行 图 11-96 设置 可 编辑 区 域 的 和 名称 
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此 时 ， 在 “设计 ”视图 中 可 以 看 到 插入 的 可 编辑 区 域 ， 如 图 11-97 所 示 。 

3. 添加 第 2 个 可 编辑 区 

选中 添加 的 表格 行 ， 在 “属性 ”面板 上 设置 背景 颜色 为 拭 BD399。 然 后 按照 上 一 步 的 方法 插入 一 个 
辑 区 域 footer。 此 时 的 页 面 效 果 如 图 11-98 所 示 。 


祁 承 名 作 


神 永 名 作 


十 霖 铃 


寺 挤 禄 切 ， 对 长 享 晚 ， 台 币 初 款 - 
都 ] 由 
发 
执 手相 看 沽 上限 ， 间 无 庄 浇 嘲 ， 
念 二 去、 千里 烟 彼 , 
莫 痪 沉 避 林 天 同 。 


多 情 自古 伤 高 别 - 

更 屠 堪 、 冷 落 清 秋 节 。 

今 至 滞 醒 何 处 ， 

杨 攀 岸 、 晓 风 基 月 ， 

此 去 经 年， 应 是 良 兵 、 好 景 店 设 * 
便 纵 有 、 干 种 风情 ， 

更 与 何人 说 . 


ee 
图 11-97 插入 的 可 编辑 区 域 图 11-98 定义 可 编辑 区 域 后 的 效果 


4. 保存 文件 
执行 “文件 ”|“ 保 存 ” 命 令 保存 文件 。 


11.6.3 ”制作 库 项 目 


1. 新 建 库 项 目 

打开 “资源 ”面板 ， 单 击 “ 库 ”按钮 园 切 换 到 “ 库 ” 面 板 。 单 击 面 
板 底 部 的 “新 建 库 项 目 ” 按 钮 图 ,设置 库 项 目 名 称 为 famous_cp.lbi， 如 
图 11-99 所 示 。 

2. 打开 库 项 目 

在 库 项 目 列表 中 双击 库 项 目 famous_cp.lbi， 打 开 库 项 目 编辑 窗口 。 

3. 编辑 库 项 目 

(1 ) 插入 表格 。 执 行 “插入 ”|“ 表 格 ”命令 ,插入 一 个 4 行 1 列 的 表格 ， 
宽度 为 90%， 边 框 粗细 、 单 元 格 边 距 和 单元 格 间 距 均 为 0。 选 中 表格 ,在 属 
性 面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 “居中 对 齐 ”。 


图 11-99 新 建 库 项 目 
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县 如 而 瑟 提 高 


(2 ) 输入 文本 。 选 中 所 有 单元 格 ， 在 属性 面板 上 设置 单元 格 内 容 水 平和 垂直 对 齐 方式 均 为 “居中 ”， 
然后 在 第 1 行 插入 水 平 线 ， 其 他 行 输入 版 权 文本 ， 并 指定 邮箱 链接 ， 如 图 11-100 所 示 。 


图 11-100 ”版权 声明 文本 


(3 ) 格式 化 文本 。 打 开 “CSS 设计 器 ”面板 , 单 击 “ 添 加 CSS 源 ” 按 钮 ,选择 在 页 面 中 定义 ; 单 击 “ 添 


加 选择 器 ”按钮 ， 输 入 选择 器 名 称 .footstyle; 然后 在 属性 列表 中 设置 文本 颜色 为 #333333， 大 小 为 14px， 
居中 对 齐 ， 如 图 11-101 所 示 。 
4. 保存 库 项 目 


执行 “文件 ” |“ 保存” 命令 ， 保 存 文件 

5. 应 用 库 项 目 

打开 模板 文件 famous.dwt， 将 鼠标 指针 定位 在 第 2 个 可 编辑 区 域 中 ， 删 除 其 中 的 占 位 文本 ， 然 后 打 
开 “ 库 ”面板 ,选中 上 一 步 制作 好 的 库 项 目 , 单 击 “ 插 入 ”按钮 插入 库 项 目 。 此 时 的 模板 如 图 11-102 所 示 。 


素 择 污 切 ， 对 长 享 效 ， 事 肌 初 欢 - 
孝 门 tk 


图 11-101 设置 CSS 属性 图 11-102 模板 效果 


6. 保存 模板 
执行 “文件 ” |“ 保存 ”命令 ， 保 存 模板 文件 。 
11.6.4 ”套用 模板 制作 新 页 面 


1. 创建 页 面 
打开 “模板 ”面板 ， 在 模板 文件 famous.dwt 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “从 模板 新 


志 
11-9 套用 模板 制作 新 页 面 


建 ”命令 ， 新 建 基于 模板 的 文档 。 可 以 发 现在 文档 中 只 有 诗词 内 容 是 可 编辑 的 ， 其 他 区 域 处 于 锁定 状态 ， 
如 图 11-103 所 示 。 


2. 保存 文件 
执行 “文件 ” |“ 保存” 命令， 将 文件 保存 为 yulinling html， 完 成 第 一 张 网 页 的 制作 。 
3. 生成 其 他 页 面 


重复 以 上 两 步 的 操作 ， 通 过 修改 诗词 内 容 ， 生 成 其 他 页 面 ， 如 图 11-104 所 示 。 


Mtoe 


Mires 神 了 永 名 作 


神 永 名 作 S 


夜半 乐 


和 干洗， 怒江 汪 处 。 
息 ， 榜 风 下 起 ， 更 亲 商 施 相 呼 - 
片 相 友 之， 世面 误 、 负 阁 过 南 浦 


案 量 请 加 ， 对 长 部 晚 ， 鄂 肌 初 输 。 
都 门 帐 饮 无 档 ， 


2 旦 中 重 旗 四 内 ， 一 答 烟 村 ， 数 行 需 村 、 
其间 训 沉 续 天 状 。 殖 晶 下、 渔 入 


败 昔 等 范 ， 床 杨 需 蚁 ， 
多 情 自古 两 别 。 许 边 两 妇 


十 行 客 、 鱼 音 奖 相 语 。 


更 与 何人 说 。 


oo te 


二 权 所 有 Copright wwi5o8 2016-2017 版 权 所 有 Copwig viSo 2016.2017 
于 全 月 


图 11-103 ”使 用 模板 创建 新 网 页 图 11-104 第 二 张 网 页 效果 
4. 添加 导航 链接 
打开 模板 文件 famous.dwt， 为 导航 文本 指定 链接 目标 ， 使 之 链接 到 上 面 制作 的 目标 文件 
5. 更 新 模板 文件 
执行 “文件 ”|“ 保 存 ” 命 令 , 弹出 “更 新 模板 文件 ”对 话 框 , 如 图 11-105 所 示 。 单 击 “ 更 新 ”按钮 ， 


弹出 如 图 11-106 所 示 的 “更 新 页 面 ”对 话 框 。 更 新 完成 后 ,在 “状态 ” 域 显示 更 新 成 功 消息 。 单 击 “ 关 闭 ” 
按钮 关闭 对 话 框 。 


区 本 


要 基于 此 模板 更 新 所 有 文件 吗 ? 
chi1\11.6Wyulinling.html 
chli\11.6\yebanle.html 


口 显示 记录 (H) 


图 11-105 “更 新 模板 文件 ”对 话 框 图 11-106 “更 新 页 面 ”对 话 框 
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至 此 ， 文 件 制作 完成 。 打 开 浏 览 器 即 可 对 作品 进行 浏览 测试 。 


11.7 答疑 解 惑 


1. 模板 和 库 的 应 用 有 何 区 别 ? 

答 : 应 用 模板 和 库 能 大 大 提高 网 站 维护 的 效率 ， 因 为 更 新 库 和 模板 时 ， 能 使 所 有 应 用 该 模板 和 库 的 
页 面 同时 自动 更 新 。 模 板 和 库 在 本 质 上 差异 不 大 , 不 同 的 是 , 模板 针对 的 是 页 面 大 框架 的 、 整 体 上 的 控制 ， 
用 于 制作 整体 网 页 的 重复 部 分 ,保持 网 站 风格 的 统一 ， 文 件 保 存在 站 点 根 目 录 下 的 Templates 文件 夹 中 ; 
库 用 于 制作 网 页 局 部 的 重复 部 分 ， 如 网 站 图 标 和 版 权 声明 ,保持 局 部 元 素 的 统一 ， 文 件 保存 在 站 点 根 目 
录 下 的 Libraly 文件 夹 中 。 

2. 怎样 使 用 Dreamweaver CC 2018 套用 从 Intemet 下 载 的 模板 和 整 站 程序 ? 

答 : 整 站 程序 一 般 都 有 模板 文件 ， 有 专用 的 模板 目录 用户 可 以 根据 需要 直接 修改 模板 。 如 果 要 套 
用 模板 生成 网 页 ， 可 以 在 Dreamweaver CC 2018 中 先 新 建文 件 ， 然 后 执行 “工具 ”|“ 模 板 ”|“ 应 用 模板 
到 页 ”菜单 命令 ,在 打开 的 “选择 模板 ”对 话 框 中 选择 需要 的 模板 。 读 者 要 注意 的 是 ， 这 些 操作 的 前 提 
是 首先 在 Dreamweaver CC 2018 中 建立 站 点 文件 夹 。 

3. 如 何 将 Dreamweaver CC 2018 模板 的 可 编辑 区 域 变 为 锁定 区 域 ? 

答 : 首先 在 Dreamweaver CC 2018 中 打开 可 编辑 区 域 所 在 的 模板 文件 。 在 模板 文件 中 ， 可 编辑 区 域 
的 名 称 是 蓝 底 黑 字 , 编辑 区 域 有 蓝 色 的 边框 , 单 击 可 编辑 区 域 的 名 称 可 以 选中 它 , 然后 执行 “工具 ”|“ 模 
板 ”|“ 删 除 模板 标记 ”命令 ， 即 可 将 该 可 编辑 区 域 变 为 锁定 区 域 。 


11.8 ”学习 效果 自 测 


一 、 选 择 题 
1.Dreamweaver CC 2018 的 模板 文件 的 扩展 名 是 ( 关 
A. html B. .lib C. .dwt D. .txt 
2. 在 命名 可 编辑 区 域 时 ，( ) 字符 可 以 用 于 设置 可 编辑 区 域 的 名 称 。 
A. 双 引号 B.| C. 小 括号 D.& 
3 资源” 面板 中 包括 的 资源 类 别 有 ( » 
A. 图 像 B. 颜色 C. 链接 D. 媒体 
4. 下 面 关于 “资源 ”面板 的 说 法 中 错误 的 是 ( )。 
A. 有 两 种 显示 方式 B. 站 点 列表 方式 可 以 显示 网 站 的 所 有 资源 


C. 收藏 夹 方式 只 显示 自 定义 的 收藏 资源 D. 模板 和 库 不 在 “资源 ”面板 中 显示 
5. 下 列 关于 可 编辑 区 的 说 法 中 正确 的 是 ( js 
A. 只 有 定义 了 可 编辑 区 ， 才 能 创建 大 同 小 异 的 网 页 
B. 在 编辑 模板 时 ， 可 编辑 区 是 可 以 编辑 的 ， 锁 定 区 是 不 可 以 编辑 的 
C .一般 把 共同 特征 的 标题 和 标签 设置 为 可 编辑 区 
D. 以 上 说 法 都 错 
二 、 判 断 题 
1. 在 模板 文档 中 ， 可 编辑 区 是 指 页 面 中 变化 的 部 分 。( ) 
2. Dreamweaver CC 2018 默认 把 所 有 区 域 标记 为 可 编辑 区 。( ) 


3. 可 以 将 网 页 中 的 整个 表格 定义 为 可 编辑 区 。( ) 
4. 可 选区 域 是 在 创建 网 页 时 定义 的 ， 其 中 的 内 容 不 可 以 是 图 片 。( ) 


5. 某 用 户 在 基于 模板 生成 的 页 面 中 无 法 插入 Div， 其 原因 可 能 是 该 用 户 没 有 定义 锁定 区 域 。( ) 

三 、 填 空 题 

1. 模板 的 〈 ) 指 的 是 在 某 个 特定 条 件 下 该 区 域 可 编辑 。 

2. 模板 有 两 种 类 型 的 区 域 : ( ) 和 ( 

3. 在 Dreamweaner CC 2018 中 ,模板 文件 存放 在 ( ) 文件 夹 中 。 

4. 除 模板 之 外 ， 还 可 以 利用 ( ) 快速 在 文档 中 输入 具有 相同 格式 和 内 容 的 文档 元 素 组 合 。 

5. 如 果 只 需要 把 库 项 目 中 的 内 容 加 到 页 面 中 ， 而 不 需要 与 库 进行 关联 ， 可 以 在 拖 动 库 项 目 到 网 页 的 
同时 按 住 ( ) 键 。 

四 、 操 作 题 


试 着 动手 创建 一 个 模板 ， 在 模板 中 插入 一 个 可 编辑 区 域 和 一 个 重复 区 域 ， 然 后 在 此 模板 基础 上 创建 
新 的 网 页 。 


细 介 绍 在 Dreamweaver CC 2018 中 利用 模板 、 结 构 元 素 、 


css 样式 等 技术 制作 站 ”的 具体 方法 。 本 章 运用 到 了 网 页 制 
| 作 的 大 部 分 技术 ， 包 括 运用 布局 块 进行 页 面 排版 、 利 用 CSStDiv 制 和 
实现 滚动 文本 的 效果 ， 以 及 利用 模板 和 库 项 目 创建 统一 3 


全 使 用 CSS 设置 布局 块 外 观 
信 创建 和 使 用 库 项 目 1 
使 用 模板 创建 网 页 的 操作 ; 


12.1 实例 效果 


本 实例 制作 一 个 简单 的 旅游 资讯 网 站 ， 用 到 了 众多 的 知识 点 ， 包 括 制 作 下 拉 菜 单 、 模 板 技 术 、 库 项 
目 以 及 滚动 文本 的 制作 等 ， 整 张 页 面 使 用 CSS+Div 进行 布局 。 首 页 效果 如 图 12-1 所 示 。 


| 


首页 北京 杭州 湖北 广西 海南 重庆 
上 特价 机 票 


北京- 杭州 机 票 7 折 


| 白天 到 夜间 : 晴 明 干燥 ,有 给 ; 
东北 风 2-3 级 ; 早晨 最 低 气温 8 
度 ， 白 天 最 高 气温 15 度 ; 相对 
温度 35% ~ 70% ; 森林 火险 等 级 
五 级 ， 极 度 危险 . | 


北京 - 武 南 山 机 票 9 折 


| 
| 提前 列 出 行李 打 旬 清单 


| 精品 路 线 2 为 重要 证 件 留 席 


| | 3 一 十 要 准备 迷你 医药 包 
| 1.2 清 之 路 


| 
西安 ( 重 始 皇 陵 兵 马 俑 )- 兰 州 -西宁 -青海 湖 - 东 卡 盐湖 - 某 达 木 爹 地 -敦煌 ( 哆 沙 山 、 月 牙 泉 ) - | | 我 们 的 服务 
| 彭 赎 关 - 张 报 市 (七 彩 丹 便 ) | 


2 京杭 运河 免费 为 多 制订 旅游 计划 、 推 荐 
oe ma | 北京 故宫 -天 津 盘山 -济宁 孔 府 孔 唐 孔 林 - 台 儿 庄 古城 -周恩来 故居 -无 匀 灵 山大 佛 - 周 庄 -嘉兴 | 优秀 景区 和 高 素质 的 导游 、 提 供 
| 于 | 名 镇 -杭州 西湖 -绍兴 - 宁 滔 委 化 溪 口 | > 和 Re 和 类 信息. 
| 3 南海 风情 | 
| ee | 三 亚 (南山 文化 旅游 多 、 商 山大 小 洞天 旅游 区 、 呀 诺 达 雨 林 文 化 乃 游 区、 分 界 洲 鸟 旅游 区 、 | 
| | 大 柳 人 区 再 文化 裁 游 区 )- 海 口 ( 尖 楼 才 街 )- 西 沙 -东沙 -高 沙 -北部 沪 NS 
| 4 香客 里 拉 ~ 
| | 昌明 (石林 )- 丽 江 ( 玉 龙 圭 山 、 丽 江 古 城 )- 虎 丈 财 -香格里拉 (车 达 措 国家 公园 )- 德 软 (梅里 雪 次回 
| 风景 二 | 山 )- 左 贡 ( 帕 巴 拉 神 湖 )- 波 密 ( 米 堆 冰 川 )- 林 芝 ( 南 迦 巴 瓦 妖 、 桃 花 沟 )- 拉 萨 ( 布 达 拉 言 ) 


版 权 所 有 : Copyright ComeySoft 2016 
建议 使 用 浏览 咕 ]E 6.0 以 上 ,屏幕 分 辩 率 1024x768 及 以 上 


Emailwebmaster@123.com 


图 12-1 首页 效果 


鼠标 指针 移 到 导航 条 上 的 文本 时 ， 文 本 显示 为 灰 底 红字 ， 且 弹出 下 拉 菜单 ， 如 图 12-2 所 示 ; 将 鼠标 
指针 移动 子 菜单 上 时 ， 对 应 菜单 项 高 亮 显示 ， 如 图 12-3 所 示 。 
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1. 丝 绸 之 路 

西安 食 始 皇 陵 兵 马 俩 )- 兰 州 -西宁 -青海 湖 - 东 卡 盐湖 - 某 达 木 盒 地 -敦煌 ( 鸣 沙 山 、 月 牙 泉 ) - 
嘉峪关 -张掖 市 (七 彩 丹 起 ) 

2 京杭 运河 


图 12-2 ”鼠标 指针 称 这 导航 文本 


1 旅游 小 贴 士 


1 提前 列 出 行李 打包 清单 
2 为 重要 证 件 留 底 


1 实时 天 气 
白天 到 夜间 : 哺 骨 干燥 ， 有 外 ; 


湿度 35%~70% ; 森林 火险 等 级 
五 级 ， 极 度 危险 . 


1 美景 欣赏 


上 1 精品 路 线 


| 1 号 
西安 ( 套 始 皇 陵 兵马俑 )- 兰 州 -西宁 -青海 湖 - 共 卡 盐湖 - 沫 达 木 谷地 -敦煌 ( 鸣 沙 山 、 月 牙 泉 ) - 
嘉峪关 -张掖 市 (七 彩 月 坊 ) 


2 京杭 运河 


图 12-3 选择 子 菜单 


本 例 有 多 个 页 
效果 如 图 12-4 所 示 。 读 者 可 以 依照 本 章 的 讲解 制作 其 他 页 面 。 


1 旅游 小 贴 十 


1 .提前 列 出 行李 打包 清音 
2 为 重要 证 件 留 谋 
3 一 定 要 准备 迷你 医药 包 


1 我 们 的 服务 


免费 为 您 制订 旅游 计划 、 推 荐 


面 ,但 内 容 主要 集中 介绍 模板 制作 方面 ,然后 在 模板 的 基础 上 制作 首页 及 “大 九 湖 " 页 面 ， 


第 12 章 
旅游 网 站 综合 实例 


一 


白天 到 夜间 : 哺 角 干燥 ， 有 四 ; 
东北 风 2~3 级 ; 早晨 最 低 气温 8 
度 ,白天 最 高 气温 15 度 ; 相对 
温度 35%~70% ; 森林 火险 等 级 
五 级 ， 极 度 危险 . 


1 美景 欣赏 


» 


神农 架 大 九 湖 国家 湿地 公园 其 湿地 生态 系统 主要 包括 亚 高 山 草 务 、 泥 炭 声 沼泽 、 蚂 菜 沼 
泽 、 苔 草 沼泽、 和 理 清 沼泽 、 迷 笃 沼泽 以 及 河 塘 水 渠 等 温 地 类 型 ， 在 中 国 漫 地 中 具有 旧型 
性 、 代 要 性 、 稀 有 性 和 符 殊 性 ， 国 家 AAAAA 级 风景 区 . 


大 九 湖 交通 


| 十 二 一 神农 桨 十 埋 市 距 高 神农 某 202 公 里 左右 ， 车 程 约 大 7 小 时 


武汉 一 神农 委 在 新 华 路 长 途 汽车 站 牧 长 途 车 ， 兴 山 有 小 巴 皇 可 到 达 神农 架 木鱼 续 。 

直 昌 一 神农 架 最 好 从 直 晶 坐 开 往 兴 山 县 的 快 巴 , 如 直接 从 直 晶 坐车 去 神农 架 ,每 天 只 有 一 
班车 ， 不 方便 ， 

重庆 一 神农 染 可 举 船 在 巴 东 港 下 船 ， 也 可 以 在 秋 淫 码头 ( 小 型 客轮 才 停 留 ) 下 船 ， 举 车 到 
兴 山 后 再 坐 革 到 神农 某 森 鱼 镇 这 中 间 的 交通 很 方便 . 


大 九 湖 自驾 线路 


球 阳 到 神农 架 : 赛 阳 - 南 漳 - 保 康 ( 后 评 - 马 桥 ) -松柏 -到 温水 -神农 荣 。 
十 卉 到 神农 架 : 十 堰 - 房 县 - 刚 厂 坪 - 菩 天 - 红 坪 镇 -木鱼 慎 ， 全 程 270 公 里 ， 小 车 约 五 个 小 


时 。 
直 昌 到 神农 架 : 直 昌 -黄花 - 弄 峰 - 秀 滤 河 -高 党 - 峡 口 -高 阳 镇 -木鱼 镇 ， 全 程 210 公 里 ， 小 车 约 
四 个 小 时 。 


北京 -上 海 机 票 9 折 
北京- 成 都 机 票 6 折 
北京 -杭州 机 票 7 折 


北京 - 卉 吉川， 机 村 9 析 


1 旅游 小 贴 十 


1 提前 列 出 行李 打包 清单 
2 为 重要 证 件 留 底 
3 一定 要 准备 过 你 医药 包 


上 我 们 的 服务 | 


免费 为 您 制订 旅游 计划 、 推 荐 
优秀 景区 和 高 素质 的 导游 、 提 供 
交通 和 宾馆 等 各 类 信息 . 


版 权 所 有 : Copyright ComeySoft 2016 
建议 使 用 浏览 器 IE 6.0 以 上 ， 屏 幕 分 辨 宁 1024x768 及 以 上 
Emailwebmaster@123.com 


首先 新 


图 12-4 ”页面 效果 


12.2 设计 思路 


CSS 样式 表 ， 定 义 各 个 布局 块 的 外 观 。 


接 下 来 使 用 Div 标签 和 CSS 样式 制作 下 拉 菜 单 ， 同 样 的 方法 ， 格 式 化 页 面 中 的 其 他 部 分 。 然 后 制作 
库 项 目 和 可 编辑 
最 后 基于 模板 生成 新 的 网 页 ， 并 修改 可 编辑 


区 域 中 的 内 容 生 成 不 同 的 页 面 。 


一 个 空白 的 HTML 模板 ,使 用 HTMLS5 中 的 语义 元 素 和 Div 创建 页 面 的 整体 框架 ， 创 建 
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革 区 并 入 门 守 语言 


12.3 制作 步骤 


本 实例 对 页 面 的 各 个 组 成 部 分 分 别 进行 讲解 ， 制 作 步 又 如 下 。 ok : 
12.3.1 制作 页 面 基 本 框架 12-1 制作 页 面 基本 框架 


1. 新 建 模板 文件 

执行 “文件 ” |“ 新建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 选择 文档 类 型 为 “HTML 模板 ”， 新 
建 一 个 空白 的 HTML 模板 文件 

2. 制作 页 面 主 结构 

(1) 在 “设计 ”视图 中 执行 “插入 ”| “Div” 命 令 ， 在 弹出 的 “插入 Div” 对 话 框 中 输入 ID 为 
main， 如 图 12-5 所 示 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 该 布局 块 用 于 定位 整个 页 面 


图 12-5 “插入 Div” 对 话 框 

(2 ) 删除 布局 块 中 的 占 位 文本 , 执行 “插入 ”|“HTML”|“Header” 命 令 , 在 弹出 的 “插入 Header” 

对 话 框 中 输入 ID 为 header， 如 图 12-6 所 示 。 单 击 “ 确 定 ”按钮 关闭 对 话 框 。 该 布局 块 用 于 放置 页 面 的 
顶 栏 图 片 


图 12-6 “插入 Header” 对 话 框 


(3) 在 状态 栏 上 选中 趣 eader 标签 ， 将 鼠标 指针 放 在 该 布局 块 右 侧 ,执行 “插入 ”/“HTML” / 
“Navigation” 命 在 弹出 的 “插入 Navigation” 对 话 框 中 输入 IJD 为 nav， 如 图 12-7 所 示 。 单 击 “ 确 定 ” 
按钮 关闭 对 话 框 。 该 布局 块 用 于 放置 导航 菜单 。 


播 入 Navigation 


图 12-7 “插入 Navigation ”对话 框 
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(4) 重复 上 面 同样 的 方法 ， 依 次 插入 一 个 Div 标签 (ID 为 container ) 和 一 个 Footer 标签 (ID 为 
footer )， 分 别 用 于 放置 页 面 内 容 和 页 脚 ， 此 时 的 页 面 如 图 12-8 所 示 。 


图 12-8 ”页 面 主 结构 


3. 制作 内 容 布局 块 

(1 ) 删除 container 布局 块 中 的 占 位 文本 ， 执行“ 插入 ”|“HTML”|“Aside” 命 令 ,在 弹出 的 “ 插 
入 Aside” 对 话 框 中 输入 ID 为 left， 如 图 12-9 所 示 。 该 布局 块 用 于 放置 左 侧 边 栏 。 同 样 的 方法 ， 在 left 
布局 块 下 方 插 入 一 个 DD 为 right 的 Aside 布局 块 ， 用 于 放置 右 侧 边栏 


图 12-9 “插入 Aside” 对 话 框 (1) 


(2 ) 在 状态 栏 上 选中 权 ight 标签 , 将 鼠标 指针 放 在 该 布局 块 右 侧 , 执行 “插入 ”| “HTML” | “Article” 
命令 ， 在 弹出 的 “插入 Article” 对 话 框 中 输入 ID 为 content， 如 图 12-10 所 示 。 单 击 “ 确 定 ”按钮 关闭 对 
话 框 。 该 布局 块 用 于 放置 页 面 正文 


图 12-10 “插入 Article” 对 话 框 (2 ) 


此 时 的 页 面 效果 如 图 12-11 所 示 。 


图 12-11 内 容 布 局 块 效果 


4. 创建 样式 表 
打开 “CSS 设计 器 ”面板 , 单 击 “ 添 加 CSS 源 ” 按 钮 ,在 弹出 的 下 拉 菜 单 中 选择 “创建 新 的 CSS 文件 ” 
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命令 。 单 击 “ 浏 览 ”按钮 ,在 弹出 的 对 话 框 中 指定 样式 表 的 保存 位 置 ,名 称 为 common.css ,添加 方式 为 “ 链 
接 ”"， 如 图 12-12 所 示 。 单 击 “确定 ”按钮 关闭 对 话 框 


创建 新 的 CSS 文件 


图 12-12 “创建 新 的 CSS 文件 ”对 话 杠 


5. 设置 页 面 属性 

执行 “文件 ”|“ 页 面 属性 ”命令 ， 在 “页 面 属 性 ”对 话 框 中 设置 页 面 的 背景 图 像 ， 页 面 字 体 大 小 
为 14， 页 边界 为 0; 然后 切换 到 “链接 ”页 面 ,设置 链接 颜色 为 #33， 已 访问 链接 颜色 为 A0E03， 变 
换 图 像 链 接 和 活动 链接 颜色 均 为 狂 F0000， 仅 在 变换 图 像 时 显示 下 画 线 ， 如 图 12-13 所 示 。 单 击 “ 确 定 ” 
按钮 关闭 对 话 框 ， 


图 12-13 设置 链接 样式 


为 保持 页 面 内 容 与 样式 分 离 ， 可 以 在 “代码 ”视图 中 将 自动 生成 的 样式 代码 ( <style> 和 </style> 之 
间 的 代码 ) 剪 切 到 样式 表 文 件 common.css 中 ， 然 后 删除 多 余 的 <style> 标签 

6. 定位 主 结构 

在 “CSS 设计 器 ”面板 中 选择 CSS 源 为 common.css， 单 击 “添加 选择 器 ”按钮 ， 输 入 选择 器 名 称 
#nain, 然 后 在 属性 列表 中 设置 宽 ( width ) 为 1000px ,左右 外 边 距 (margin ) 为 auto, 上、 下 外 边 距 ( margin ) 
为 0， 如 图 12-14 所 示 。 这 样 ， 整 个 页 面 将 水 平 居中 显示 。 

7. 制 作 topbar 

按照 上 一 步 同 样 的 方法 添加 选择 器 圳 eader， 在 属性 列表 中 设置 高 (height ) 为 332px; 然后 设置 背景 
图 像 ， 且 图 像 不 重复 ， 如 图 12-15 所 示 。 此 时 的 页 面 效果 如 图 12-16 所 示 
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+ 一 迁 振 加 : #header 
这 属性 
昌国 日 

加 布局 

height 


图 


nd-image 
an images/t 


ae 夯 


backgroond 
ert 


图 12-14 设置 主 结构 的 CSS 属性 


图 12-16 topbar 的 效果 


8. 设置 导航 条 的 外 观 
重复 上 一 步 的 方法 添加 选择 器 因 av， 设 置 CSS 属性 如 下 : 
#nav { 


width: 1000px; 
height: 40px} 
margin: 0px auto 5px auto} 
border: lpx solid #666666} 
background-color: #67C6ED; 


} 
此 时 的 页 面 效 果 如 图 12-17 所 示 


图 12-17 导航 条 的 针 观 效果 


9. 定位 内 容 显示 区 域 


(1) 设置 左 侧 边栏 属性 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 胡 ef， 然 后 在 属性 列表 中 定义 属性 。 


或 者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 
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#1left { 
width: 210px; 
float: left; 
background-color :#91D5EF; 
margin-top: 0px; 
border:1px solid #666; 

} 


(2 ) 设置 右 侧 边栏 属性 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 #ight， 然 后 在 属性 列表 中 定义 属性 。 
或 者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 


#right { 
float: right; 
width: 210px; 
margin: 0px’} 
border:lpx solid #666; 
background-color :#91D5EF; 


4 


(3 ) 设置 正文 显示 区 域 的 属性 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 #content， 然 后 在 属性 列表 中 
定义 属性 。 或 者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 


#content { 
width: 570px; 
margin-left: 214px; 
margin-right: Spx} 
border:lpx solid #666; 
background-color :#91D5EF; 
} 


此 时 的 页 面 在 “实时 视图 ”中 的 显示 效果 如 图 12-18 所 示 。 


“> f pd 
党- 同 
六 六 


RR ete 可 讼 ae FC 天 人 


图 12-18 内 容 显 示 区 域 定 位 


10. 格式 化 页 脚 区 域 

在 “CSS 设计 器 ”面板 中 添加 选择 器 #footer， 然 后 在 属性 列表 中 定义 属性 。 或 者 直接 在 common.css 
文件 中 编写 样式 定义 ， 代 码 如 下 : 

#footer { 


width:1000px} 
background-color :#91D5EF; 


text-align: center; 
line-height: 120%; 
font-size: 14px} 
border:1px solid #666; 
margin-top:3px} 
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padding-top:5px} 
padding-bottom: 5px; 


此 时 的 页 面 在 “实时 视图 ”中 的 显示 效果 如 图 12-19 所 示 。 


此 由 旺 示 14 “left” 的 内 窜 。 此 处 显示 id “comtent” 的 内 册 外 B 趟 le -egat 的 内 容 | 
显示 4 “toorer” 的 5 | 


图 12-19 页面 效果 


11. 保存 模板 
执行 “文件 ”|“ 保 存 ” 命 令 ， 在 弹出 的 对 话 框 中 输入 模板 名 称 lvyou.dwt。 


12.3.2 ”制作 导航 条 
1. 添加 一 级 导航 文本 


te 
删除 nav 标签 中 的 占 位 符 文本 ， 输 入 文本 ， 以 回 车 符 分 隔 。 然 后 选中 文本 ， 单 击 。 12_? 制作 导航 条 
HTML 属性 面板 上 的 “项 目 列表 ”按钮 ， 创 建 无 序列 表 ， 并 为 文本 添加 链接 ， 效 果 如 
图 12-20 所 示 。 


2. 定义 无 序列 表 的 列表 样式 


(1) 取消 显示 项 目 符号 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 ul li， 然 后 在 属性 列表 中 定义 属 
或 者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 
Le 


list-style-image: none;}; 
list-style-type: none} 
} 


此 时 的 显示 效果 如 图 12-21 所 示 ， 列 表 项 左 侧 不 显示 项 目 符号 


; 重庆 
9 Pr 的 R 守 融 处 显示 这 "content 的 内 容 
图 12-20 无 序列 表 效果 图 12-21 取消 显示 项 目 符号 效果 


(2 ) 定义 列表 项 的 显示 方式 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 知 av ul ii， 然 后 在 属性 列表 时 
义 属性 。 或 者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 


性 。 


or 


P 定 
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#nav ul 1i { 
float: left; 
margin-left: 40px; 
text-align:center; 
height: 40px; 
width: 100pxy 

} 


此 时 的 显示 效果 如 图 12-22 所 示 , 列表 项 目 横向 排 成 一 行 , 顶部 对 齐 。 将 鼠标 指针 移 到 导航 文本 周围 ， 
可 以 看 到 列表 项 的 区 域 范围 


渚 南 下 庆 


JS 示 3d “Tirent 的 9 窜 ] 


b 处 时 示 i “footer” 的 内 容 


图 12-22 ”列表 项 横向 排列 效果 


(3 ) 定义 列表 项 的 链接 样式 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 和 av ul lia， 然 后 在 属性 列表 中 
定义 属性 。 或 者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 


#nav ul li at{ 
diaplay:block; 
width:100px; 
height:40px; 
text-align:center; 
line-height:40px; 
color: #333}; 

} 


此 时 ,页 面 在 “实时 视图 "中 的 显示 效果 如 图 12-23 所 示 ,文本 垂直 居中 ,将 鼠标 指针 移 到 导航 文本 上 时 ， 
文本 下 方 显示 下 夯 线 


有 吧 外 理 示 id “1ef+ ”的 内 容 如 加 未 36 


此 隶 虹 示 id “footer” 的 内容 | 


图 12-23 ”列表 项 的 链接 效果 


(4) 定义 鼠标 指针 经 过 的 链接 样式 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 加 av ul li a;hover， 然 后 在 
属性 列表 中 定义 属性 。 或 者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 
#nav ul 1i ashover{ 
display:block} 
background-color:#999}; 
color: #F00} 
} 


此 时 ， 页 面 在 “实时 视图 ”中 的 显示 效果 如 图 12-24 所 示 ， 将 鼠标 指针 移 到 导航 文本 上 时 ， 列 表 项 
的 区 域 显示 为 灰 底 ， 文 本 显示 为 红色 ， 且 下 方 显 示 下 画 线 


此 下 未 1 “toreer 的 


图 12-24 ”鼠标 指针 经 这 的 链接 样式 效果 
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3. 定义 二 级 菜单 的 显示 效果 
(1) 添加 二 级 菜单 文本 。 切 换 到 “代码 ”视图 ， 单 击 文档 窗口 左上 角 的 “ 源 代码 ”按钮 ， 修 改 
<nav> 标签 的 代码 ， 添 加 二 级 菜单 。 修 改 后 的 代码 如 下 : 


<nav id="nav"> 
<ul> 
<li><a href="#"> 首 页 </a></1i> 
<1li><a href="#"> 北 京 </a> 
<ul> 
<1i><a href="#"> 故宫 博物 院 </a></1i> 
<1li><a href="#"> 天 安 门 </a></1i> 
<1i><a href=" 关 "> 颐和园 </a></1i> 
</ul> 
</1i> 
<1li><a href="#"> 杭 州 </a> 
<ul> 
<li><a href="#"> 西 湖 </a></1i> 
<1li><a href="##"> 龙井 山 </a></1i> 
<1i><a href="#"> 灵 隐 寺 </a></1i> 
</ul> 
</1i> 
<li><a href="#"> 湖 北 </a> 
<ul> 
<li><a href="wuyinshan.html"> 大 九 湖 </a></1i> 
<1i><a href="#"> 神农 项 </a></1i> 
</ul> 
</1i> 
<li><a href="#"> 广 西 </a> 
<ul> 
<li><a href="#"> 北 海 </a></1i> 
<li><a href="#"> 南 宁 </a></1i> 
</ul> 
</1i> 
<1li><a href="#"> 海 南 </a></1i> 
<li><a href="#"> 重 庆 </a></1i> 
</ul> 
</nav> 


此 时 ,页 面 在 “实时 视图 ”中 的 显示 效果 如 图 12-25 所 示 。 默 认 情 况 下 ,二 级 菜单 与 一 级 菜单 同 屏 显 示 ， 
且 显 示 样 式 相同 。 


大池 北 法 。 有 陛 站 中 id xisht 6 


[| 


图 12-25 添加 二 级 菜单 文本 效果 


(2 ) 定义 二 级 列表 的 显示 样式 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 加 av ul li ul li， 然 后 在 属性 列 
表 中 定义 属性 。 或 者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 


#nav ul 1i ul 1i{ 
float:none; 
width:100px; 
background:#eee; 
margin:0} 
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水 
#nav ul 1i ul{ 
display:none; 
border:1px solid #cccy 
position:absolute; 
旨 
#nav ul li:hover ulf{ 
float :none; 
display:block; 
} 
上 面 的 代码 首先 使 用 float:none; 清除 二 级 菜单 的 浮动 ， 然 后 定义 二 级 菜单 的 宽度 、 背 景色 。 使 用 
margin:0 清除 继承 自 一 级 菜单 中 的 左边 距 margin-left:40px。 
接 下 来 使 用 display:none: 隐藏 二 级 菜单 ， 然 后 在 规则 # 加 av ul li:hover ul 中 使 用 display:block 指定 当 鼠 
标 指针 划 过 时 显示 二 级 菜单 。 如 果 二 级 菜单 显示 ， 将 会 把 下 边 的 内 容 挤 跑 ， 所 以 使 用 position:absolute; 对 
#nav ul liul 绝对 定位 。 
此 时 ,页面 在 “实时 视图 ”中 的 显示 效果 如 图 12-26 所 示 。 二 级 菜单 隐藏 ,将 鼠标 指针 移 到 导航 文本 上 时 ， 
显示 二 级 菜单 。 


前 页 标 州 海北 而 海南 重庆 
两 ERISR id zet RE | 


图 12-26 二 级 菜单 的 显示 效果 


(3 ) 定义 二 级 菜单 的 链接 样式 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 和 av ul li ul， 然 后 在 属性 列表 
中 定义 属性 。 或 者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 
#nav ul li ul li af 


background:none}; 

} 

#nav ul li ul li a:hover{ 
background:#333}; 
color:#ff; 

} 


首先 使 用 background:none 清除 继承 自 一 级 菜单 的 背景 ， 然 后 指定 鼠标 指针 划 过 链接 时 的 背景 颜色 和 
文本 颜色 。 

此 时 ， 页 面 在 “实时 视图 ”中 的 显示 效果 如 图 12-27 所 示 ， 将 鼠标 指针 移 到 二 级 菜单 上 时 ， 二 级 列 
表 背 景 显 示 为 深 灰 色 ， 文 本 显示 为 白色 ， 且 带 有 下 画 线 。 


图 12-27 二 级 菜单 的 链接 样式 效果 


4. 保存 文件 
执行 “文件 ”|“ 保 存 ”命令 ， 保 存 模板 文件 和 样式 表 文件 。 


第 12 章 345 
旅游 网 站 综合 实例 


12.3.3 ”制作 侧 边 栏 


1. 制作 “实时 天 气 ”栏目 

(1) 插入 栏目 布局 块 。 删 除 布局 块 left 中 的 占 位 文本 。 执 行 “ 插 入 ”|“Div” 命令 ， 
在 弹出 的 对 话 框 中 设置 布局 块 ID 为 weather。 

(2 ) 删除 布局 块 中 的 占 位 文本 ， 切 换 到 “代码 ”视图 ， 添 加 布局 块 weather 的 显示 内 容 。 编 辑 后 的 
相关 代码 如 下 : 


<aside id="left"> 
<div id="weather"> 
<div> 实时 天 气 </div> 
<div> 白天 到 夜间 : 晴朗 干燥 ， 有 答 ; 东北 风 2-3 级 ; 早晨 最 低 气温 8 度 ， 白 天 最 高 气温 15 度 ; 相对 湿度 35% 
到 70%; 森林 火险 等 级 五 级 ,极度 危险 。 </div> 
<br> 
</div> 
</aside> 


此 时 的 页 面 效果 如 图 12-28 所 示 。 
) 格式 化 栏目 标题 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 .tile， 然 后 在 
属性 列表 中 定义 属性 。 或 者 直接 在 common.css 文件 中 编写 样式 定义 ,代码 如 下 

si 

background-image: url(images/index bg9.gif); 图 12-28 ”添加 文本 效果 

background-repeat: no-repeat; 

height: 40px; 

padding-left: 30px; 

padding-top: 10px; 

color: #FFF; 

font-family: " 新 宋体 "; 

font-size: 18px; 

line-height: 100%} 

margin-left:5px; 

margin-top:5px} 


} 


应 用 类 定义 。 切 换 到 “ 源 代码 ”视图 ， 将 <div> 实时 天 气 </div> 修改 为 <div class="title"> 实时 天 气 
</div>， 此 时 的 页 面 效 果 如 图 12-29 所 示 。 
(4) 格式 化 栏目 内 容 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 .title， 然 后 在 属性 列表 中 定义 属性 。 或 
者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 
.info { 
padding-left: 6px; 
padding-right: 6px;} 


12-3 ”制作 侧记 栏 


Se 


font-size: 14px} 
line-height: 150%; 
} 


应 用 类 定义 。 切 换 到 “ 源 代码 ”视图 ， 将 天 气 信 息 所 在 的 div 标签 修改 为 <div class="info">， 此 时 的 
页 面 效 果 如 图 12-30 所 示 。 


晴 阴 干燥 ,有 
东北 风 2~3 级 ; 早 是 最 低 气温 8 


度 ， 白 天 最 高 气温 15 度 ; 相对 湿 
度 35% ~70%; 森林 火险 等 级 五 
级 ,极度 危险 。 


高 气温 15 度 
0% 各 科 炎 了 各 失 于 级 ， 极度 危 


图 12-29 应 用 .title 类 的 效果 图 12-30 ”应 用 .info 类 的 效果 
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四 则 RAAT 高 


2. 制作 “美景 欣赏 ”栏目 


(1 ) 添加 内 容 。 在 状态 栏 上 选中 weather 标签 ,将 指针 放 在 该 布局 块 右 侧 , 执 行 “ 插 入 ”|“Div” 命 令 ， 
在 弹出 的 对 话 框 中 设置 布局 块 D 为 view。 然 后 切换 到 “代码 ”视图 ， 为 该 布局 块 添加 内 容 ， 代 码 如 下 : 


<div id="view"> 
<div class="title"> 美景 欣赏 </div> 
<ul> 
<li><a href= 
<li><a href 
<li><a href= 
<li><a href: 
<li><a href= 
<1i><a href="#"> 风景 三 </a></1i> 
</ul> 
<br> 
</div> 


此 时 的 页 面 效 果 如 图 12-31 所 示 


##"> 风景 一 </a></1i> 


#"> 风景 二 </a></1i> 


"#"><img src="../ch12/images/timg004.jpg" width="200" 
"><img src="../ch12/images/timg012.jpg" width=" 


"><img src="../ch12/images/timg009.jpg" width=" 


height="138"></a></1i> 


" height="138"></a></1i> 


" height="138"></a></1i> 


(2 ) 格式 化 列表 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 #view ul 和 #wiew ul img， 然 后 在 属性 列表 中 


定义 属性 。 或 者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 


#view ul{ 
list-style:none; 
padding:0px; 
margin:0px} 
text-align:center; 

} 

#view ul img{ 
border: lpx solid #FFF; 


} 


CSS 规则 #view ul 用 于 定义 列表 项 居中 ， 无 项 目 符号 ， 无 内 外 边 距 ; #wiew ul img 用 于 为 列表 中 的 图 


片 指定 边框 ， 以 美化 图 片 ， 此 时 的 页 面 效 果 如 图 12-32 所 示 。 


1 美景 欣赏 | 


5 度 ;要 对 时 
良 ser~ Tai 齐 打 仁和 五 
EE 


全 让 加 示 id footer 的 A 府 。 


图 12-31 页 面 效 果 图 12-32 左 侧 启 栏 效果 


3. 制作 “特价 机 票 ”栏目 


(1) 插入 栏目 布局 块 。 删 除 布局 块 right 中 的 占 位 文本 。 执 行 “ 插 入 ”|“Div” 


框 中 设置 布局 块 ID 为 news 

(2 ) 删除 布局 块 中 的 占 位 文本 ， 切 换 到 “代码 ”视图 ， 
代码 如 下 : 

<div id="news"> 


<div class="title"> 特价 机 票 </div> 
<div class="info"> 


<p align="center"> 北 京 北京 -上 海 。 机 票 o 折 
<p align="center"> 北 京 -成 都 snbsp; snbsp; 机 票 6 折 </p> 
<p align="center"> 北 京 -杭州 snbsp; snbsp; 机 票 7 折 </p> 北京 -成 都 。 机 票 折 
<p align="center"> 北 京 -武夷 山 snbsp) snbsp; 机 票 9 折 </p> 北京 -杭州 机 票 ? 折 
S/O 北京- 武吉 山 机票 o 折 
</div> 
此 时 的 页 面 效 果 如 图 12-33 所 示 图 12-33 “特价 机 票 ”栏目 效果 
(3) 实现 滚动 文本 效果 。 切 换 到 “代码 ”视图 ， 在 要 滚动 的 文本 前 、 后 分 别 添加 <marquee 


behavior="scroll" direction="up" hspace="0" height="120" vspace="5" loop="-1" scrollamount="1" 


scrolldelay="80"> 和 </marquee> 标签 ， 如 图 12-34 所 示 


> 北京 - 上 海 snbsp; &nbsp; 机 票 9 折 </p> 
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人 人 
节令 ， 


添加 布局 块 news 的 显示 内 容 。 编 辑 后 的 可 


! 特价 机 票 


图 12-34 ”实现 文本 滚动 


4. 制作 其 他 栏目 
按照 上 面 同样 的 方法 制作 其 他 栏目 。 相 应 的 代码 如 下 : 
// 插入 “自由 搭配 ”图 片 


<div class="free"><img src="../chl2/images/page left bg4.gif" 


</div> 
// 制作 “旅游 小 贴 士 ”栏目 
<section id="tips"> 
<div class="title"> 旅游 小 贴 士 </div> 
<div class="info"> 
&nbsp; 1. 提前 列 出 行李 打包 清单 <br> 
&nbsp;} 2. 为 重要 证 件 留 底 <br> 
&nbsp; 3. 一 定 要 准备 迷你 医药 包 <br> 
</div> 
<br> 
</section> 
// 制作 “我 们 的 服务 ”栏目 
<section id="service"> 
<div class="title"> 我 们 的 服务 </div> 
<div class="info">&gnbsp; 
</div> 
<br> 
</section> 


alte"free” 


在 弹出 的 对 话 


有 关 


title="free"> 


免费 为 您 制订 旅游 计划 、 推 荐 优秀 景区 和 高 素质 的 导游 、 提 供 交 通 和 宾馆 等 各 类 信息 。 
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// 插入 “服务 热线 ”图 片 
<div class="free"><img src="../ch12/images/tel.gif" alt="tel" title="tel"></div> 


// 插入 “返回 ”图 片 


<div class="free"><img src="../ch12/images/s bg7.gif" alt="return" title="return"></div> 
<br> 

其 中 ，.free 用 于 定义 图 片 的 左 外 边 距 ， 代 码 如 下 : 

.free{ 
margin-left:5px; 
} 


此 时 的 页 面 效 果 如 图 12-35 所 示 


} 旅游 小 贴 十 


东 

度 ， 

谋 : 
a 
己 为 重要 证 件 窜 诺 
也 一定 竟 阁 各 壕 你 区 药 包 
} 我 们 的 服务 
竞 费 为 您 汕 订 能 洲 计划 、 失 


苦 代 和 景区 和 高 素 的 导 游 ， 提 
这 少年 各 类 信息、 


EE 


图 12-35 ” 侧 廊 栏 效果 


5. 保存 文件 
执行 “文件 ” |“ 保存 ”命令 ， 保 存 模板 文件 和 样式 表 文 件 。 


12.3.4 ”制作 库 项 目 


el 


1. 制作 “weather” 库 项 目 2 

在 “设计 ”视图 中 选中 “实时 天 气 ” 栏 目 中 的 天 气 信息 ,执行 “工具 ”|“ 库 ”|“ 增 加 对 象 到 库 ” 命 令 ， 
在 打开 的 “ 库 ” 面 板 中 输入 库 项 目的 名 称 为 weather， 然 后 按 Enter 键 。 此 时 页 面 中 的 选中 内 容 以 淡 黄 底 
色 高 亮 显示 ， 如 图 12-36 所 示 。 

2. 制作 “news” 库 项 目 

在 “设计 ”视图 中 选中 “特价 机 票 ”栏目 中 的 天 气 信息 ， 按 照 上 一 步 同 样 的 方法 增加 对 象 到 库 ， 在 
打开 的 “ 库 ” 面 板 中 输入 库 项 目的 名 称 为 news， 然 后 按 Enter 键 。 此 时 页 面 中 的 选中 内 容 以 淡 黄 底 色 高 
亮 显示 ， 如 图 12-37 所 示 。 
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下 就 训 机 票 听 

北 风 2.3 级 ;早晨 景 低 气温 8 靶 , 晶 要 

天 最 高 气温 15 度 ; 相对 湿 魔 Ht 京杭 州 机 票 新 
北京 址 山 机票 

图 12-36 库 项 目 weather 图 12-37 库 项 目 news 


3. 制作 “lvyou_cp” 库 项 目 
删除 布局 块 footer 中 的 占 位 文本 ,输入 版 权 信 息 。 选 中 输入 的 文本 ,执行 “工具 ”|“ 库 ”| 增加 对 象 到 库 ” 
命令 ,在 打开 的 “ 库 ” 面 板 中 输入 库 项 目的 名 称 为 lvyou_cp， 然 后 按 Enter 键 。 此 时 页 面 中 的 选中 内 容 以 
淡 黄 底 色 高 亮 显 示 ， 如 图 12-38 所 示 。 
有 : Copyright ComeySoft 2010] 


版 权 所 y 
建议 使 用 刘 览 器 下 6.0 以 上 , 屏幕 分 辨 盏 1024x768 及 以 上 
Emal webmaster @123 .com| 


图 12-38 ” 库 项 目 lvyou_cp 


4. 保存 模板 
执行 “文件 ”|“ 保 存 ” 命 令 ， 保 存 模板 文件 。 为 便于 查看 页 面 效 果 ， 可 在 #content 的 CSS 属性 定义 
设置 height 属性 的 值 为 728px， 此 时 的 页 面 在 浏览 器 中 的 显示 效果 如 图 12-39 所 示 。 


和 zu 相州 到 六 r 间 EE nm 


Em EZ 


和 3 
A; PRR Hr- MR 


号 
下 = 3 
| 3 
Toa 
ES 区 2 


Re— lam ne 
2 要 ER 
rr 
+! 我 们 的 服务 
人 
Ra 和 
区 村 Br 
加 让 六 溢 
Fs= 


Copyraht Comersett 2015 
a 
nam em 


图 12-39 ”实例 效果 
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至 此 ,模板 基本 制作 完成 ， 接 下 来 添加 可 编辑 区 
12.3.5 ”添加 可 编辑 区 域 


IX, 
营 


1. 添加 可 编辑 区 weather 12-5 添加 可 编辑 区 域 
在 “设计 ”视图 中 选中 “实时 天 气 ” 栏 目 中 的 天 气 信息 ， 执 行 “ 插 入 ”|“ 模 板 ”|“ 可 编辑 区 域 ” 命 
令 ,弹出 “新 建 可 编辑 


区 域 ”对话 框 , 在“ 名称” 文本 框 中 输入 weather, 单 
页 面 上 显示 可 编辑 区 域 的 名 称 ， 如 图 


“确定 ”关闭 对 话 框 。 此 时 ， 
12-40 所 示 。 
2. 添加 可 编辑 区 news 和 |vyou_cp 
在 “设计 ”视图 中 选中 “特价 机 票 ”栏目 中 的 天 气 信 息 ， 按 照 上 一 步 同样 的 方法 插入 可 编辑 区 域 
news， 如 图 12-41 所 示 。 在 “设计 ”视图 中 选中 页 脚 中 的 版 权 信 息 ， 使 用 同样 的 方法 插入 可 编辑 区 域 
lvyou_cp。 


白天 到 夜间 :晴朗 干燥 ,有 著 ; 责 


35% ~70%; 麻 林 火险 等 级 五 级 


图 12-40 ”可 编辑 区 域 weather 图 12-41 可 编辑 区 域 news 
3. 制作 可 编辑 区 intro 


(1 ) 添加 布局 块 。 删 除 布局 块 content 中 的 占 位 文本 ， 切 换 到 “代码 ”视图 ， 修 改 布局 块 content 的 
结构 如 下 : 


<article id="content"> 
<h3>title</h3> 


<div class="info">my article</div> 
</article> 


(2 ) 插入 可 编辑 区 域 。 在 “设计 ”视图 中 选中 布局 块 content ,执行 “插入 ”|“ 模 板 ”|“ 可 编辑 
区 域 ” 命 令 ， 在 弹出 的 “新 建 可 编辑 区 域 ” 对 话 框 中 输入 “名 称 ” 为 intro， 然 后 单 击 “ 确 定 ” 按 
钮 关闭 对 话 框 。 
此 时 ,在 “设计 ”视图 中 可 以 看 到 插入 的 可 编辑 区 域 ， 如 图 12-42 所 示 。 
4. 保存 文件 
执行 “文件 ” |“ 保存” 命令 保存 文件 。 

12.3.6 ”制作 首页 


1. 套用 模板 生成 页 面 


打开 “模板 ”面板 , 在 模板 文件 lvyou.dwt 上 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 
命令 ， 如 图 12-43 所 示 ， 基 于 模板 生成 一 个 新 文档 。 


12-6 制作 首页 
Ph 选 择 “ 从 模板 新 建 ” 


图 12-42 插入 的 可 编辑 区 域 


2. 添加 内 容 
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出 新 站 点 列表 (R) 
重建 站 点 列表 


新 建 模板 (W) 
ET 
丝 纺 源 文件 (0) 
应 用 (A) 
从 源 文件 更 新 (U) 
生态 名 (M) 
ie(D) 
更 新 当前 页 (U) 
更 新 站 点 [P).- 
复制 到 站 点 (C) 
在 站 点 定位 人 


图 12-43 ”从 模板 新 建文 件 


(1) 插入 图 片 。 切 换 到 “代码 ”视图 ， 修 改 布局 块 content 中 的 内 容 ， 代 码 如 下 : 


<article id="content"> 


<div class="free"><img src="file:///C:/inetpub/wwwroot/test/chl2/images/timg001.jpg" 


width="560" height="380" alt="jiuhu" title="jiuhu"></div> 
</article> 


此 时 的 页 面 效 果 如 图 12-44 所 示 


阁 页 湖北 


白天 到 夜间 : 晴 关 干燥 ， 有 狂 ; 
东北 风 2~3 骸 ;早晨 最 低 气 温 8 
度 ， 白 天 最 高 气温 15 度 ; 相对 是 
度 35%~70%; 森林 火险 等 级 五 
级 ,极度 危险 。 


! 美景 欣赏 


机 票 p 折 


北京 -武夷 山 


图 12-44 插入 图 片 的 效果 


(2 ) 制作 “精品 路 线 ” 栏 目 。 打 开 “ 代 码 ” 视 图 , 在 上 一 步 插入 图 片 的 Div 标签 下 方 添加 如 下 代码 : 


<div id="luxian"> 
<div class="title"> 精品 路 线 </div> 
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<ul> 

<1i><a href="#">1. 丝绸 之 路 </a></1i> 

<1i> 西安 ( 秦始皇 陵 兵 马 俑 )- 兰州 - 西宁 - 青海 湖 - 茶 卡 盐湖 - 柴 达 木 盆地 - 敦煌 ( 鸣 沙 山 、 月 牙 泉 ) - 
嘉峪关 - 张掖 市 ( 七 彩 丹 霞 )</1i> 

<1i><a href="#">2. 京杭 运河 </a></1i> 

<1i> 北京 故宫 - 天 津 盘山 - 济宁 孔 府 孔庙 孔 林 - 台儿庄 古城 - 周恩来 故居 - 无 锡 灵山 大 佛 - 周庄 一 嘉兴 乌镇 - 
杭州 西湖 - 绍兴 - 宁波 奉化 溪 口 </1i> 

<1li><a href="#">3. 南海 风情 </a></1i> 

<1i> 三 亚 ( 南山 文化 旅游 区 、 南 山大 小 洞天 旅游 区 、 呀 诺 达 雨林 文化 旅游 区 、 分 界 洲 岛 旅游 区 、 槟 椰 谷 黎 苗 文 
化 旅游 区 )- 海口 ( 骑楼 老 街 )- 西沙 - 东沙 - 南沙 - 北部 湾 </1i> 

<1i><a href="#">4. 香格里拉 </a></1i> 

<1i> 昆明 ( 石林 )- 丽江 ( 玉龙 雪山 、 丽 江 古 城 )- 虎 跳 峡 - 香格里拉 ( 普 达 措 国 家 公园 )- 德 钦 ( 梅里 雪山 
)- 左 贡 ( 帕 巴 拉 神 湖 )- 波 密 ( 米 堆 冰 川 )- 林芝 ( 南 迎 巴 瓦 峰 、 桃 花 沟 )- 拉萨 ( 布 达 拉 宫 )</1i> 


</ul> 
<br> 
</div> 


此 时 的 页 面 效 果 如 图 12-45 所 示 ， 


4. 丝绸 之 路 
西安 ( 素 始 丘陵 兵 马 角 )- 兰 州 -西宁 -青海 湖 - 杀 卡 盐湖 - 柴 达 木 盆地 - 教 煌 09 沙 山 、 月 牙 
泉 ) -嘉峪关 -张掖 市 (七彩 丹 茂 ) 


生生 二 山 -济宁 孔 府 孔庙 孔 林 -台儿庄 古城 -周恩来 故居 -无 袍 灵山 大 佛 - 周 
Ee ESE 铝 兴 -宁波 奉化 溪 品 


了 .南海 
于 亚 喇 山 化 让 六 区 、 南山 大 小 洞天 旅游 区 、 呀 诺 达 雨林 文化 旅游 区 、 分 界 洲 鸟 旅游 
&, 黎 苗 文化 旅游 区 ) -海口 ( 咕 档 老 街 )- 西 沙 -东沙 -南沙 -北部 湾 


里 拉 
生生 宙 -丽江 (玉龙 雪山 、 机 江 古 城 )- 虎 跳 峡 -香格里拉 ( 普 达 措 国 家 公园 ) - 德 软 ( 梅 
和 ( 帕 巴 拉 神 湖 )- 波 客 全 册 - 林 艺 ( 南 迎 巴 瓦 峰 、 桃 花 沟 )- 拉 萨 ( 布 达 


图 12-45 页面 效果 


(3 ) 格式 化 文本 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 区 uxian ul， 然 后 在 属性 列表 中 定义 属性 。 或 
者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 


#luxian ul{ 


padding:8px} 
margin: Opx} 
line-height: 160%; 
} 


上 面 代码 用 于 定义 布局 块 luxian 中 的 内 容 边 距 及 行距 ,效果 如 图 12-46 所 示 。 
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工 丝绸 之 路 

西安 束 娩 皇 陵 兵 马 山 )- 兰 州 -西宁 -青海 湖 - 杀 卡 盐湖 - 柴 达 木 盆地 - 敦 志 (入; 沙 山 、 月 牙 泉 ) 
-嘉峪关 -张掖 市 (七 彩 月 暇 ) 

2. 享 杭 运 河 

北京 故宫 -天 津 盘 山 -济宁 孔 府 孔 店 孔 林 -台儿庄 古 城 -周转 来 故居 -无 锡 灵 山大 佛 -局 庄 ~ 嘉 
兴 乌 镇 -杭州 西湖 -绍兴 -宁波 幸 化 法 口 

5. 南海 风情 

三 亚 坪山 文化 旅游 区 、 南 山大 小 洞天 旅游 区 ， 呀 诺 达 雨林 文化 旅游 区 、 分 界 洲 | 岛 旅 游 区 、 
棕 郴 谷 黎 苗 文化 旅游 区 )- 海 口 (骑楼 老 街 )- 西 沙 -东沙 -南沙 -北部 洁 

4 香格里拉 

昆明 (石林 )- 丽 江 (玉龙 雪山 、 丽 江 古 城 )- 席 跳 峡 - 香 格 里 拉 ( 普 达 措 国家 公园 )- 德 钦 ( 梅 里 雪 
山 )- 左 贡 地 巴 拉 神 湖 )- 波 密 ( 米 堆 冰 镍 -林芝 ( 南 迎 巴 瓦 峰 、 桃 花 沟 ) -拉萨 ( 布 达 拉 宫 ) 


图 12-46 应 用 样式 后 的 效果 


3. 保存 文件 


执行 “文件 ”|“ 保 存 ” 命 令 ， 将 文件 保存 为 default.html， 完 成 首页 的 制作 。 在 浏览 器 中 的 预览 效果 
如 图 12-1 所 示 。 


12.3.7 ”制作 其 他 页 面 


1. 创建 新 页 面 回 叶 

打开 “模板 ”面板 ， 在 模板 文件 lvyou.dwt 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 。 12-7 制作 其 他 页 面 
中 选择 “从 模板 新 建 ”命令 ， 基 于 模板 生成 一 个 新 文档 。 

2. 添加 页 面 内 容 

(1 ) 修改 标题 。 在 “设计 ”视图 中 ， 将 可 编辑 区 域 intro 中 的 title 修改 为 “大 九 湖 国家 湿地 公园 ”。 

(2 ) 删除 布局 块 中 的 占 位 文本 “my article”"， 输 入 需要 的 文本 内 容 ， 并 插入 图 片 。 

此 时 的 页 面 效 果 如 图 12-47 所 示 ， 图 片 默认 左 对 齐 ， 不 居中 显示 。 


大 九 湖 国家 湿地 公园 


神农 加 大 九 湖 国 家 湿地 公园 的 湿地 生态 系统 主要 包括 亚 高 山 草 外 、 泥 普 三 沼泽 、 睡 菜 
沼泽 、 莒 齐 沼 泽 、 香 清 沼 泽 、 柴 侍 沼 泽 以 及 河 塘 水 浴 等 湿地 类 型 ， 在 中 国 湿地 中 具有 典型 
性 、 代 表 性 、 稀 有 性 和 特殊 性 ， 区 


图 12-47 页 面 效 果 


(3 ) 定义 规则 使 图 片 居中 。 在 “CSS 设计 器 ”面板 中 添加 选择 器 提 uxian ul， 然 后 在 属性 列表 中 定 
义 属性 。 或 者 直接 在 common.css 文件 中 编写 样式 定义 ， 代 码 如 下 : 


.img-1 { 


text-align: center; 


} 
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切换 到 “代码 ”视图 ， 将 图 片 所 在 的 <img> 标签 放 在 <div> 标签 中 ， 并 应 用 定义 的 类 .img-1。 修 改 
后 的 代码 如 下 : 


<div class="img-1"><img src="images/timg.jpg" width="300" height="220"></div> 


此 时 的 页 面 效 果 如 图 12-48 所 示 。 


大 九 湖 国家 湿地 公园 


神农 加 大 九 湖 国 家 湿地 公园 的 湿地 生态 系统 主要 包括 亚 高 山 草 甸 、 泥 磋 声 滞 举 、 睡 菜 
沼泽 、 苛 齐 沼 泽 、 香 清治 泽 、 紫 薄 ee 在 中 国 湿地 中 具有 典型 
性 、 代 表 性 、 稀 有 性 和 特殊 性 , 


图 12-48 图片 居 中 显示 效果 


3. 保存 文件 
执行 “文件 ”|“ 保 存 ” 命 令 ， 将 文件 保存 为 jiuhu.html。 
至 此 ,文件 制作 完成 。 打开 浏览 器 妈 可 对 作品 进行 浏览 测试 ， 效 果 如 图 12-1 所 示 。 
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HTML 是 Hypertext Markup Language ( 超 文本 标记 语言 ) 的 首 字母 缩写 ， 是 一 种 用 于 建立 Web 页 面 
的 描述 性 语言 。 使 用 HTML 编写 的 网 页 文件 是 标准 的 ASCI 文件 ， 扩 展 名 通常 为 htm 或 .html。 

通常 所 说 的 HTML 是 指 W3C 网 络 标准 化 组 织 1999 年 12 月 推出 的 HIML4.01 ,该 语言 相当 成 熟 可 靠 ， 
一 直 沿 用 至 今 。Dreamweaver CC 2018 默认 的 HTML 文档 类 型 为 HIML5， 是 W3C 与 WHATWG 合作 创 
建 的 一 个 新 版 本 HIML， 将 成 为 HIML 、XHTML 以 及 HTML DOM 的 新 标准 。 

HTML 5 的 设计 原则 就 是 在 不 支持 它 的 浏览 器 中 能 够 平稳 地 退化 。 也 就 是 说 ， 老 式 浏览 器 不 认识 新 
元 素 ， 则 完全 忽略 它们 ， 但 是 页 面 仍然 会 显示 ， 内 容 仍然 是 完整 的 。 为 了 实现 更 好 的 灵活 性 和 更 强 的 互 
动 性 ，HIML5 引入 和 增强 了 更 为 强大 的 特性 ， 包 括 控制 、APIs、 多 媒体 、 结 构 和 语义 等 ， 使 建构 网 页 变 
得 更 容易 。 

1. HTML 的 语法 结构 

可 以 用 任何 文本 编辑 器 建立 HTML 页 面 ， 例 如 Windows 的 “记事 本 ”， 与 一 般 的 文本 文件 不 同 的 是 ， 
HTML 文件 不 仅 包含 文本 内 容 ， 还 包含 一 些 Tag ( 标签 )。 标 准 的 HTML 由 标签 和 标签 元 素 构 成 ， 并 用 一 
组 “<” 与 “>” 括 起 来 , 例如 : 

<img src="images/fantasy5float5.gif" width="90” height="51” /><b> 点 击 这 里 </b> 

在 用 浏览 器 显示 时 ， 标 签 <b> 和 </b> 不 会 被 显示 ， 浏 览 器 在 文档 中 发 现 了 这 对 标签 ， 就 将 其 中 包容 
的 文字 以 粗 体形 式 显示 。 


结 注意 : XHTML 是 HTML 向 XML 的 过 渡 。 与 HIML 不 一 样 ，XHTML 是 区 分 大 小 写 的 。 在 
XHTML 下 的 Web 标准 中 ， 所 有 的 XHTML 元 素 和 属性 的 名 字 都 必须 使 用 小 写 ， 和 否则 文档 不 能 通过 
W3C 校 验 。 


标签 通常 是 成 对 出 现 的 。 每 当 使 用 一 个 标签 ， 例 如 <blockquote>， 则 必须 用 相应 的 结束 标签 
</blockquote> 将 它 关闭 。 但 是 也 有 一 些 标签 例外 ， 例 如 ，<input> 标签 就 不 需要 。 


嫩 注意 : 在 XHTML 中 ,每 一 个 打开 的 标签 都 必须 关闭 。 空 标签 也 要 在 标签 尾部 使 用 一 个 正 


斜 杠 "/" 来 关闭 ， 例 如 <br />、<img src="logo.gif' alt=" 点 击 返 回首 页 " />。 


严格 地 说 ， 标 签 和 标签 元 素 不 同 ， 标 签 元 素 是 位 于 “<” 和 “>” 符 号 之 间 的 内 容 ， 而 标签 则 包括 了 
标签 元 素 和 “<” 和 “>” 符 号 本 身 。 但 是 ,脱离 了 “<” 和 “>” 符 号 的 标签 元 素 毫 无 意义 ,因此 在 本 书 中 ， 
如 不 作 特别 说 明 ， 将 标签 和 标签 元 素 统一 称 作 “ 标 签 "。 

HTML 的 语法 有 以 下 几 种 表达 方式 。 

1) < 标签 > 对 象 </ 标签 > 

这 种 语法 结构 显示 了 使 用 封闭 类 型 标签 的 形式 ， 一 个 起 始 标签 总 是 搭配 一 个 结束 标签 ， 在 起 始 标签 
的 标签 名 前 加 上 符号 “/” 便 是 其 终止 标签 ， 如 <head> 与 </head>。 起 始 标签 和 终止 标签 之 间 的 内 容 受 标 
签 的 控制 。 


澡 注意 : 如 果 一 个 应 该 封闭 的 标签 没有 结束 标签 , 则 可 能 产生 意 想不到 的 错误 , 随 浏览 器 不 同 ， 
可 能 出 错 的 结果 也 不 同 。 建 议 读者 在 使 用 HTML 标签 时 ， 最 好 先 弄 清 标签 是 否 为 封闭 类 型 。 


附录 1 
HTML 标 签 概 术 


2) < 标签 属性 1]= 参数 1 属性 2= 参数 2> 对 象 </ 标签 > 
这 种 语法 结构 利用 属性 设置 对 象 的 外 观 。 每 个 HTML 标签 都 可 以 有 多 个 属性 ， 属 性 名 和 属性 值 之 间 


用 “=” 连 接 ,构成 一 个 完整 的 属性 ,多 个 属性 之 间 用 空格 分 开 。 使 用 示例 : 
<font face= "隶书 " size= "20 " color=" 三 F0000"> 爱 就 在 你 身边 </font> _ 
ER 网 和 爱 就 在 你 身边 
上 述 语 句 表示 将 “ 爱 就 在 你 身边 ”的 字体 设置 为 隶书 ， 字 号 设置 为 
20， 颜 色 设置 为 红色 ， 效 果 如 图 1 所 示 。 图 1 <font> 标签 前 示例 效果 


A 注意 : 在 HTMLS5 中 , 属性 值 必须 加 引号 , 如 果 属 性 值 中 有 引号 , 可 以 使 用 编码 &apos; 表示 ， 
例如 <alt="say&apos:yes&apos;">。 


3 ) < 标签 > 

这 种 表示 方法 用 于 不 成 对 出 现 的 标签 ( 也 称 为 非 封闭 类 型 标签 )， 读 者 最 常见 的 应 该 是 换行 标签 
<br>。 使 用 示例 : 

<font face= "隶书 ”size= "5" color="#006600"> 溪水 急 着 要 流向 海 


洋 <br> 浪潮 却 渴望 重 回 土地 gnbsp;</font> 溪水 访 着 要 流向 海洋 
在 浏览 器 中 的 显示 效果 如 图 2 所 示 。 澳 潮 邦 渴 涡 重 回 和 土地 


使 用 <br> 标签 使 一 行文 字 在 中 间 换 行 ， 显 示 为 两 行 ， 但 结构 上 仍 。 图? <br> 标签 的 示例 效果 
属于 同一 个 段落 。 

4 ) 标签 巾 套 

几乎 所 有 的 HTML 代码 都 是 上 面 三 种 形式 的 组 合 ， 标 签 之 间 可 以 相互 柑 套 ， 形 成 更 为 复杂 的 语法 。 
例如 ， 如 果 希 望 将 一 行文 本 同时 设置 粗 体 和 斜体 格式 ， 则 可 以 采用 下 面 的 语句 ; 


<b><i> 十 里 香 </i></b> 


在 嵌 套 标签 时 需要 注意 标签 的 嵌 套 顺序 ， 如 果 标 签 的 嵌 套 顺序 发 生 混乱 ， 则 可 能 会 出 现 不 可 预料 的 
结果 。 例 如 ， 将 上 面 的 示例 写成 如 下 形式 : 


</i><i><b> 十 里 香 </i></b> 


上 面 的 语句 中 ， 标 签 嵌 套 发 生 了 错误 。 在 状态 栏 上 可 以 看 到 linting 图 标 显示 为 辆 ， 表 明代 码 中 存在 
错误 。 单 击 linting 图 标 ， 在 弹出 的 “输出 ”面板 上 可 以 查看 错误 所 在 的 代码 行 和 错误 可 能 原因 。 

2. 常用 的 HTML 标签 

详细 介绍 HTML 中 常用 的 一 些 标签 。 掌 握 这 些 标签 的 用 法 ， 对 网 页 制作 可 以 起 到 事半功倍 的 效果 。 

1 ) 文档 的 结构 标签 

在 Dreamweaver CC 2018 中 创建 了 一 个 空白 的 HTML 5 文档 后 ， 切 换 到 “代码 ”视图 ， 可 以 看 到 如 
下 所 示 的 源 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 无 标题 文档 </title> 
</head> 


<body> 
</body> 
</html> 


357 


358 Breemmweever GS 20l8 
得 高 


上 面 的 代码 包括 了 一 个 标准 的 HTML 文件 应 该 具有 的 组 成 部 分 。 

(1 ) <!doctype> 标签 。 

该 标签 声明 是 文档 中 的 第 一 个 组 成 部 分 ， 声明 文档 的 类 型 ， 告 知 浏览 器 文档 所 使 用 的 HTML 规范 ， 
对 大 小 写 不 敏感 。 该 声明 必须 放 在 每 一 个 HTML 文档 最 顶部 ， 在 所 有 代码 和 标识 之 上 ， 否 则 文档 声明 
无 效 。 

在 HTML 4.01 中 有 三 个 不 同 的 文档 类 型 ,在 HTML 5 中 只 有 一 个 : <!doctype html>。 

(2 ) <html> 标签 。 

<html>…</html> 标签 是 HIML 文档 的 开始 和 结束 标签 ， 告诉 浏览 器 整个 HIML 文件 的 范围 。 

(3 ) <head> 标签 。 

<head>…</head> 标签 用 于 包含 当前 文档 的 有 关 信 息 ， 例 如 标题 和 关键 字 等 ， 通 常 将 这 两 个 标签 之 间 
的 内 容 统称 作 HIML 的 “ 头 部 ”。 

位 于 头 部 的 内 容 一 般 不 会 在 网 页 上 直接 显示 ， 而 是 通过 另外 的 方式 起 作用 。 例 如 ， 在 HTML 的 头 部 
定义 的 关键 字 不 会 显示 在 网 页 中 ,但 是 会 在 搜索 网 页 时 起 作用 。 

(4) <title> 标签 。 

<title> 和 </title> 标签 位 于 <head> 和 </head> 标签 之 间 ， 用 于 定义 页 面 的 标题 。 

(5 ) <body> 标签 。 

<body>…</body> 用 于 定义 HTML 文档 的 正文 部 分 ， 定 义 在 </head> 标签 之 后 ，<html>…</html> 标 
签 之 间 。 有 如 下 六 个 常用 的 可 选 属性 : 

和 background: 用 于 为 文档 指定 一 幅 图 像 作为 背景 。 

3 text: 用 于 定义 文档 中 文本 的 默认 颜色 。 

YN link: 用 于 定义 文档 中 一 个 未 被 访问 过 的 超级 链接 的 文本 颜色 。 

和 alink: 用 于 定义 文档 中 一 个 正在 打开 的 超级 链接 的 文本 颜色 。 

和 vlink: 用 于 定义 文档 中 一 个 已 经 被 访问 过 的 超级 链接 的 文本 颜色 。 

和 bgcolor: 定义 文档 的 背景 颜色 。 

使 用 示例 : 


<body background="001.gif" text="black" link="green" alink="blue" vlink="red"> 


在 浏览 器 中 的 预览 效果 如 图 3 所 示 。 


未 访问 的 链接 


正在 访问 的 链接 
图 3 <body> 标签 的 示例 效果 


此 外 ，HTML 5 添加 了 一 些 新 元 素 专门 用 来 标识 常见 的 结构 。 

Si section: 表示 文章 或 应 用 程序 的 通用 部 分 ， 如 一 个 章节 ， 实 际 上 是 在 HIML 4 中 有 自己 标题 的 任 
何 东西 。 

对 header: 定义 section 或 page 的 页 眉 ; 与 head 元 素 不 一 样 。 
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footer: 页 脚 ， 可 以 显示 电子 邮件 中 的 签名 。 
nav: 导航 标签 ， 指 向 其 他 页 面 的 一 组 链接 。 
article: blog 、 杂 志 、 文 章 汇 编 等 中 的 一 篇 文章 。 
aside: 侧 边栏 ， 通 常用 于 关联 周边 参考 内 容 。 
和 main: 主 内容 区 。 
2 ) 注释 标签 
HTML 的 客户 端 注 释 标签 为 <!--…-->， 在 这 个 标签 内 的 文本 不 会 在 浏览 器 窗口 中 显示 。 一 般 将 客户 
端的 脚本 程序 放 在 此 标签 中 。 
使 用 示例 : 


<! -- <p><a href="index.html"> 链接 三 </a></p>--> 


被 注释 的 文本 不 会 在 浏览 器 中 显示 。 但 是 ， 如 果 是 服务 器 端 程序 代码 ， 即 使 在 这 个 注释 标签 内 也 会 
被 执行 。 

3 ) 文本 格式 标签 

文本 格式 标签 用 于 控制 网 页 中 文本 的 样式 ， 如 大 小 、 字 体 、 段 落 样 式 等 。 

(1 ) <font> 标签 。 

<font > … </font> 标签 用 于 设置 文本 字体 格式 ， 包 括 字体 、 字 号 、 颜 色 、 字 型 等 。 常 用 的 有 如 下 三 个 
属性 。 

和 face: 用 于 设置 字体 名 称 ， 多 个 字体 名 称 用 逗号 分 隔 。 

3 Size: 用 于 设置 字体 大 小 ， 数 字 越 大 字体 越 大 。 

和 Color: 用 于 设置 文本 颜色 ， 可 以 用 red、white 和 green 等 助 记 符 ， 也 可 以 用 16 进 制 数 表示 ， 如 

红色 为 "#EF0000"。 
使 用 示例 : 


<font face=" 华文 彩云 ”size="7"” color="black"> 欢迎 光临 </font> ?他 歼 咯 


在 浏览 器 中 的 显示 效果 如 图 4 所 示 : 

(nb < Som》 和。 图 4 font 标签 示例 效果 

@ <b>…</b>: 定义 粗 体 文本 。 

@ <i>…</i>: 定义 斜体 文本 

@ <em>…</em>: 将 标签 之 间 的 文字 加 以 强调 。 不 同 的 浏览 器 效果 有 所 不 同 ， 通 常会 设置 成 斜体 。 

(3 ) <h 扩 标签 。 

<h#>...</h#> (#1, 2, 3, 4, 5, 6) : 用 于 设置 标题 字体 ， 有 一 级 到 六 级 标题 ， 显 示 为 黑体 字 ， 数 字 越 
大 字体 越 小 。<h#>.….</h#> 标签 自动 插入 一 个 空 行 ， 例 如 : 


<h1> 这 是 一 级 标题 </h1> 
<h2> 这 是 二 级 标题 </h2> 


a 
a 
] 
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<h3> 这 是 三 级 标题 </h3> .FE 一 乡 二 
<h4> 这 是 四 级 标题 </h4> 这 大 级 标 题 
<h5> 这 是 五 级 标题 </h5> 
<h6> 这 是 六 级 标题 </h6> 这 是 二 级 标题 
显示 效果 如 图 5 所 示 。 这 是 三 级 标题 
(4) <pre> 预 格式 化 标签 。 这 是 四 级 标题 
默认 情况 下 ，Dreamweaver CC 2018 会 将 两 个 字符 之 间 的 多 个 空格 替换 | 这 是 五 级 标题 
为 一 个 空格 ， 然 后 在 浏览 器 中 显示 。<pre>…</pre> 标签 用 于 设 定 浏览 器 在 | 、。、gprm 


输出 时 ， 对 标签 内 部 的 内 容 几乎 不 做 修改 地 输出 。 
图 5 }h## 标 签 示例 效果 
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提高 
例如 ， 在 Dreamweaver CC 2018 的 代码 视图 中 输入 以 下 代码 : 再 则 康桥 
<pre> 再 别 康桥 </pre> 
再 别 。 康 折 " 再 别 康 酉 
在 浏览 器 中 的 显示 效果 如 图 6 所 示 。 图 6 pre 标签 示例 效果 


4 ) 排版 标签 

(1) <br> 标签 。 

用 于 在 文本 中 添加 一 个 换行 符 ， 不 需要 成 对 使 用 。 

(2 ) <p> 标签 。 

用 于 定义 段落 。 

(3 ) <hr> 标签 。 

HTML 4.01 中 ， 该 标签 仅仅 显示 为 一 条 水 平 线 ; 在 HTML 5 中 ， 该 标签 定义 内 容 中 的 主题 变化 ,并 
显示 为 一 条 水 平 线 。 

(4) <sub> 标签 。 

将 标签 之 间 的 文本 设置 成 下 标 。 

(5 ) <sup> 标签 。 

将 标签 之 间 的 文本 设置 成 上 标 。 

(6) <div> 标签 。 

用 于 块 级 区 域 的 格式 化 显示 。 该 标签 可 以 把 文档 划分 为 若干 部 分 ， 并 分 别 设置 不 同 的 属性 值 ， 常 用 
于 设置 CSS 样式 。 

(7 ) <span> 标签 。 

用 于 定义 内 蔡 的 文本 容器 或 区 域 ， 主 要 用 于 一 个 段落 、 句 子 甚至 单词 中 。 

使 用 示例 : 

<span style = "color: red; font-size: 18pt">18 点 大 小 的 红色 字体 </span> 

Div 标签 和 span 标签 的 区 别 在 于 , Div 是 一 个 块 级 元 素 , 可 以 包含 段落 、 标 题 、 表 格 , 乃至 诸如 章节 、 
摘要 和 备注 等 。 而 span 是 行内 元 素 ，span 的 前 、 后 是 不 会 换行 的 ， 它 纯粹 应 用 样式 。 下 面 的 使 用 示例 可 
以 说 明 这 两 个 属性 的 区 别 。 

<span> 第 一 个 span</span> 

<span > 第 二 个 span</span> 


<span > 第 三 个 span</span> 
<div> 第 一 个 div</div> 


a Dv spen lb 

“设计 ”视图 中 的 页 面 效 果 如 图 7 所 示 。 

5 ) 列表 标签 

在 HTML 中 ,列表 标签 分 为 无 序列 表 、 有 序列 表 和 普通 列表 三 种 。 

(1 ) 无 序列 表 <ul>。 

列表 项 之 间 没 有 先后 次 序 之 分 ， 标 签 格式 为 : <ul><li>.…</li></ul>。 其 中 每 一 个 <li> 标签 表示 一 个 列 
表 项 值 。 

(2 ) 有 序列 表 <ol>。 

列表 项 左 侧 标 有 序号 。<ol>…</ol> 用 于 标签 有 序列 表 的 开始 和 结束 。 

(3 ) 普通 列表 。 

普通 列表 通过 <dl><dt>...</dt><dd>...</dd>…</dl> 的 形式 实现 ， 通 常用 于 排版 。 其 中 ，<dl>…</dl> 
标签 用 于 创建 一 个 普通 的 列表 ; <dt>…</dt> 用 于 创建 列表 中 的 上 层 项 目 ; <dd>…</dd> 用 于 创建 列表 中 


该 表格 在 浏览 器 中 的 效果 如 图 9 所 示 。 
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最 下 层 的 项 目 。<dt>…</dt> 和 <dd>…</dd> 都 必须 放 在 <dl>…</dl> 标签 之 间 。 例 如 : 


<dl> 

<dt> 网 页 制作 </dt> 
<dd>FLASH</dd> 
<dd>FIREWORK</dd> 
<dt> 程序 设计 </dt> 
<dd>JAVASCRIPT</dd> 
<dd>VBSCRIPT</dd> 
</dl> 


在 浏览 器 中 的 显示 效果 如 图 8 所 示 。 

6 ) 表格 标签 

(1 ) <table> 标签 。 

表格 由 <table>…</table> 标签 构成 ，HTML 5 不 支持 <table> 标签 的 任何 属性 。 
(2 ) <tr> 标签 。 

<tr>…</tr> 标签 用 于 标记 表格 一 行 的 开始 和 结束 。 图 8 普通 列表 效果 
(3 ) <th> 标签 。 

<th>…</th> 用 于 标记 表格 内 表 头 的 开始 和 结束 ， 该 标签 内 的 文本 通常 显示 为 粗 体 。<th> 的 常用 属性 


如 下 。 


和 colspan: 设置 <th>…</th> 内 的 内 容 跨 越 的 列 数 。 

NN rowspan: 设置 <th>…</th> 内 的 内 容 跨越 的 行 数 。 

和 scope: 设置 是 否 提供 指定 部 分 的 表 头 信息 。row 表示 包含 此 单元 格 的 行 的 其 余部 分 ; col 表示 包含 
此 单元 格 的 列 的 其 余部 分 ; rowgroup 表示 包含 此 单元 格 的 行 组 的 其 余部 分 ; colgroup 表示 包含 此 
单元 格 的 列 组 的 其 余部 分 。 

(4 ) <td> 标签 。 

<td>…</td> 用 于 标记 表格 内 一 个 单元 格 的 开始 和 结束 。<td> 标签 应 位 于 <tr> 标签 内 部 。 在 HTML 5 


中 ，<td> 仅仅 支持 colspan 和 rowspan 属性 。 


使 用 示例 : 


<table width="300" border="1" cellpadding="2" cellspacing="2"> 
<tr> 
<th width="83"” scope="col"> 名 称 </th> 
<th colspan="2" scope="col"> 参数 </th> 
< /tr> 
<tr> 
<td>123</td> 
<td width="119">qwe</td> 
<td width="70">zxc</td> 
</tr> 
<tr> 
<td>456</td> 
<td>asd</td> 
<td>fgh</td> 
</tr> 
</table> A 


| 名称 | 参数 
上 面 的 代码 表明 表格 包含 3 行 3 列 , 第 一 行 设置 了 跨 两 列 的 合并 形式 。 要 [awe 国 
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7 ) 表单 标签 图 9 表格 合并 列 的 效果 
(1 ) <form> 标签 。 
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<form>…</form> 标签 用 于 表示 一 个 表单 的 开始 与 结束 ， 并 且 通 知 服务 器 处 理 表单 的 内 容 ， 表 单 
的 各 种 表单 控件 都 要 放 在 这 两 个 标签 之 间 。 常 用 属性 介绍 如 下 。 

和 name: 用 于 指定 表单 唯一 的 名 称 。HTML 5 用 了 D 代替 该 属性 。 

3 action: 指定 提交 表单 后 ， 将 对 表单 进行 处 理 的 文件 路 径 及 名 称 ( 即 URL )。 

YN method: 用 于 指定 发 送 表单 信息 的 方式 ,有 GET 方式 ( 通过 URL 发 送 表单 信息 ) 和 POST 方式 ( 通 
过 HTTP 发 送 表单 信息 )。POST 方式 适合 传递 大 量 数据 ,但 速度 较 慢 ; GET 方式 适合 传送 少量 数 
据 , 但 速度 快 。 

和 enctype: 用 于 指定 对 表单 内 容 进 行 编码 的 MIME 类 型 。 

和 accept-charset: 用 于 指定 表单 数据 可 能 的 字符 集 列表 ( 以 逗号 分 隔 )， 默 认 值 为 nknown。 

和 target: 指定 打开 目标 URL 的 方式 。 

(2 ) <input> 标签 。 

<input> 标签 用 于 定义 输入 字段 。 它 有 一 个 type 属性 ， 对 于 不 同 的 type 属性 值 ，<input> 标签 有 不 同 

的 属性 。 例 如 ， 当 type="text" ( 文本 域 ) 或 type="password" ( 密码 域 ) 时 ，<input> 标签 的 属性 如 下 。 

Si size: 文本 框 在 浏览 器 中 的 显示 宽度 ， 实 际 能 输入 的 字符 数 由 maxlength 参数 决定 。HTML 5 不 再 
支持 该 属性 。 

Smaxlength: 在 文本 框 中 最 多 能 输入 的 字符 数 。 

当 type="submit" ( 提交 按钮 ) 或 type="reset" ( 重 置 按 钮 ) 时 ，<input> 标签 有 如 下 属性 : 

和 value: 在 按钮 上 显示 的 标签 。 

当 type="radio" ( 单 选 按钮 ) 或 type="checkbox" ( 复 选 框 ) 时 ，<input> 标签 参数 介绍 如 下 : 

和 value: 用 于 指定 单 选 按钮 或 复 选 框 被 选中 时 ， 对 应 的 值 。 

和 checked: 用 于 指示 input 元 素 被 选中 。 同 一 组 radio 单 选 按钮 中 最 多 只 能 有 一 个 单 选 按钮 带 
checked 属性 。 复 选 按钮 则 无 此 限制 ， 

当 type="image" ( 图 像 按钮 ) 时 ，<input> 标签 有 如 下 属性 : 

sre: 图 像 文件 的 URL。 

3 alt: 图 像 无 法 显示 时 的 替代 文本 。 

align: 图 像 对 象 的 对 齐 方式 , 取 值 可 以 是 top left bottom .middle 和 right。HTML5 不 支持 该 属性 ， 
可 用 CSS 属性 指定 。 

使 用 示例 : 

<form action="login action.jsp" method="POST"> 

姓名 ; <input type="text" name=" 姓 名 " size="16"><br> 

密码 : <input type="password" name=" 密码 " size="16"><br> 

性 别 : <input name="radiobutton" type="radio" value="radiobutton"> 男 

<input name="radiobutton" type="radio" value="radiobutton"> 女 <br> 

爱好 : <input type="checkbox" name="checkbox"” value="checkbox"> 运动 

<input type="checkbox" name="checkbox2" value="checkbox"> 音乐 <br> 

图 像 : <input name="imageField" type="image" src="dd.gif" width="16" height="16" border="0"><br> 

<input type="submit"” value=" 发 送 "><input type="reset" value=" 重 设 "> 


</form> 

上 述 代码 在 浏览 器 中 的 显示 效果 如 图 10 所 示 : 3 

(3 ) <select> 和 <option> 标签 。 性 别 ， 日 男 @@ 女 

<select>…</select> 标签 用 于 在 表单 中 创建 下 拉 列 表 。 它 与 <option>… A 
</option> 标签 一 起 使 用 ，<option> 标签 用 于 添加 列表 项 。<select> 标签 的 常用 -四 
属性 简要 介绍 如 下 。 图， 

YN name: 指定 列表 框 的 名 称 。 EE 


3 size: 指定 列表 框 中 可 见 项 目的 数目 , 如 果 列 表 项 数目 大 于 size 属性 值 ， 图 10 input 标签 的 示例 效果 
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则 通过 滚动 条 来 滚动 显示 。 
multiple: 指定 在 列表 框 是 否 可 以 选中 多 项 ， 默 认 下 只 能 选择 一 项 。 
disabled: 是 否 在 页 面 中 禁用 菜单 列表 。 
form: 指定 下 拉 列 表 所 属 的 一 个 或 多 个 表单 。 
autofocus: 指定 页 面 加 载 时 是 否 使 select 字段 获得 焦点 。 
<option> 标签 常用 的 属性 如 下 。 
和 selected: 用 于 设置 初始 时 ， 列 表 项 是 被 默认 选中 的 。 
和 value: 用 于 指定 列表 项 的 选项 值 ， 如 果 不 指定 ， 则 默认 为 标签 后 的 内 容 。 
使 用 示例 : 
<select name="fruits" size="3" multiple> 
<option selected>Apple 


<option selected>Peach 
<option value=My Favorite>Orange 


<option>Banana 图 11 示例 效果 

</select> 

在 浏览 器 中 的 效果 如 图 11 所 示 。 

(4 ) <textarea> 标签 。 

<textarea>…</textarea> 标签 的 作用 与 <input> 标签 的 type 属性 值 为 text 时 的 作用 相似 ,不 同 之 处 在 于 ， 
<textarea> 显示 的 是 多 行 多 列 的 文本 区 域 ， 而 <input> 文本 框 只 有 一 行 。<textarea> 和 </textarea> 之 间 的 
文本 是 文本 区 域 的 初始 文本 。<textarea> 标签 的 常用 属性 如 下 。 

所 name: 指定 文本 区 域 的 名 称 。 

3 rows: 文本 区 域 可 见 的 行 数 。 

和 cols: 文本 区 域 可 见 的 列 数 。 

和 readonly: 用 于 设置 用 户 是 否 无 法 修改 文本 区 的 内 容 。 

3 required: 用 于 设置 提交 表单 时 ， 该 标签 的 值 是 否 必 填 。 
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使 用 示例 : 

<textarea name="comment" rows="5" cols="20"> 在 这 里 输入 要 查询 的 内 容 
在 这 里 输入 要 查询 的 内 容 

</textarea> 

在 浏览 器 中 的 显示 效果 如 图 12 所 示 。 图 12 示例 效果 


8 ) 其 他 标签 

(1 ) <img> 标签 。 

该 标签 用 于 定义 图 像 ， 除 sre 属性 是 不 可 缺 省 的 以 外 ， 其 他 属性 均 为 可 选项 。 常 用 属性 如 下 。 

和 src: 用 于 指定 要 插入 图 像 的 URL。 

Si alt: 用 于 设置 当 图 像 无 法 显示 时 的 替换 文本 ， 或 载 人 图 像 后 ， 将 鼠标 移 到 图 像 上 时 显示 的 提示 
文本 。 

和 width: 用 于 设置 图 像 的 宽度 ， 以 像素 为 单位 。 

Si height: 用 于 设置 图 像 的 高 度 ， 以 像素 为 单位 。 

(2 ) <a> 标签 。 

<a> 标签 用 于 实现 超 链接 ， 其 起 止 标签 之 间 的 内 容 即 为 锚 标 。 常 用 的 属性 如 下 : 

Si href: 用 于 指定 目标 文件 的 URL ,该 属性 不 能 与 name 属性 (HIML5 中 替换 为 ID 属性 ) 同时 使 用 。 

和 name: 用 于 命名 一 个 锚 。HTMLS5 使 用 ID 代替 该 属性 。 

和 9 type: 用 于 指定 目标 URL 的 MIME 类 型 ， 该 属性 与 href 属性 配合 使 用 。 

Si target: 用 于 指定 打开 目标 URL 的 方式 ， 与 href 属性 配合 使 用 。 
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(3 ) <meta> 标签 。 

<meta> 标签 用 于 指定 文档 的 关键 字 、 作 者 、 描 述 等 多 种 信息 ,在 HTML 的 头 部 可 以 包含 任意 数量 
的 <meta> 标签 。<meta> 标签 是 非 成 对 使 用 的 标签 ， 它 的 参数 介绍 如 下 。 

和 name: 用 于 定义 content 属性 关联 的 名 称 。 

和 content: 用 于 定义 http-equiv 或 name 属性 相关 的 信息 。 

和 http-equiv: 用 于 替代 name 属性 ，HTTP 服务 器 可 以 使 用 该 属性 来 从 HTTP 响应 头 部 收集 信息 。 

和 charset: 用 于 定义 文档 的 字符 解码 方式 。 

使 用 示例 ， 


<meta name = "description" content = "comey 制 作 "> 

<meta charset = "gb2312"> 

(4) <link> 标签 。 

用 于 定义 文档 之 间 的 包含 ， 通 常用 于 链接 外 部 样式 表 。<link> 标签 是 一 个 非 封 闭 性 标签 ， 只 能 在 

<head>…</head> 中 使 用 。 

在 HTML 的 头 部 可 以 包含 任意 数量 的 <link> 标签 ， 常 用 的 属性 如 下 。 

href: 用 于 设置 链接 资源 所 在 的 URL。 

和 rel: 用 于 定义 文档 和 所 链接 资源 的 链接 关系 ， 可 能 的 取 值 有 Alternate，Stylesheet，Start，Next， 
Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection,，Appendix, Help 和 
Bookmark 等 。 如 果 希 望 指定 不 止 一 个 链接 关系 ， 可 以 在 这 些 值 之 间 用 空格 隔 开 。 

和 media: 用 于 指定 文档 将 显示 在 什么 设备 上 。 

和 rev: 用 于 定义 所 链接 资源 与 当前 文档 之 间 的 关系 。 其 可 能 的 取 值 与 rel 属性 相同 。 

例 用 示例 : 


<link rel= "Shortcut Icon" href="soim.ico"> 


上 述 语 句 表示 将 浏览 器 地 址 栏 里 面 的 e 图 标 蔡 换 为 href 属性 指向 的 图 标 ， 当 收藏 该 页 面 时 ， 收 藏 夹 
中 的 图 片 也 将 随 之 改变 。 

(5 ) <base> 标签 。 

<base> 标签 是 一 个 非 封闭 性 的 标签 ， 用 于 定义 页 面 中 所 有 链接 的 基准 URL。 文 档 中 所 有 的 相对 地 址 
都 是 相对 于 这 里 定义 的 URL 而 言 的 。 一 篇 文档 中 的 <base> 标签 不 能 多 于 一 个 ， 必 须 定 义 于 标签 <head> 
与 </head> 之 间 ， 并 且 应 该 在 任何 包含 URL 地 址 的 语句 之 前 。<base> 标签 的 常用 属性 简要 介绍 如 下 。 

和 href: 指定 了 文档 的 基础 URL 地 址 。 该 属性 在 <base> 标签 中 是 必须 存在 的 。 

3 target: 用 于 指定 页 面 上 链接 的 打开 方式 。 该 属性 会 被 每 个 链接 中 的 target 属性 覆盖 。 

(6) <style> 标签 。 

该 标签 用 于 在 网 页 中 创建 样式 ， 它 把 CSS 直接 写 人 到 HTML 的 head 部 分 。 但 笔者 不 建议 这 样 使 用 ， 
应 将 网 页 结构 与 样式 分 离 ， 便 于 维护 。 常 用 属性 如 下 。 

3 type: 用 于 定义 内 容 类 型 。 

和 media: 用 于 定义 样式 信息 的 目标 媒介 。 

Sa scoped: 指定 样式 是 否 仅仅 应 用 到 style 元 素 的 父 元 素 及 其 子 元 素 。 


站 / 提示 : 在 HTML 5 中 ， 所 有 元 素 都 不 支持 style 属性 ， 若 要 为 一 个 元 素 添加 样式 ， 应 在 
style 元 素 中 使 用 scoped 属性 。 如 果 没 有 定义 scoped 属性 , 则 <style> 元 素 必须 是 head 元 素 的 子 元 素 ， 
或 者 是 noscript 元 素 的 子 元 素 。 
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(7 ) <marquee> 标签 。 

该 标签 用 于 在 页 面 中 设置 滚动 字幕 。 常 用 的 属性 如 下 。 

3 direction: 用 于 设置 字幕 的 滚动 方向 ， 属 性 值 可 设置 为 left 和 right。 

和 behavior: 用 于 设置 字幕 的 滚动 方式 ， 属 性 值 可 设置 为 slide 、alternate 、scroll， 分 别 表示 只 滚动 一 
次 、 来 回 滚动 和 单方 向 循环 滚动 。 

和 loop: 用 于 设置 字幕 滚动 时 的 循环 次 数 ， 属 性 值 可 设置 为 整数 ， 若 未 指定 则 循环 不 止 (infinite )。 

和 scrollamount: 用 于 设置 字幕 滚动 的 速度 ， 属 性 值 为 整数 。 

和 scrolldelay: 用 于 设置 字幕 滚动 的 延迟 时 间 ， 属 性 值 为 整数 。 

(8 ) <iframe> 标签 。 

该 标签 用 于 在 网 页 中 设置 浮动 帧 网 页 。 常 用 的 主要 属性 有 src 和 name 属性。 

和 sre: 该 属性 用 于 设置 浮动 帧 的 初始 页 面 的 URL。 

和 name: 该 属性 用 于 设置 浮动 帧 窗口 的 标识 名 称 。 

使 用 示例 : 

<iframe src="yulinling.html" name="window"> 
Here is a Floating Frame 

</iframe> 

<br><br> 

<a href="dingfengbo.html" target="window">Load A</A><BR> 


<a href="hechongtian.html" target="window">Load B</A><BR> 
<a href="yebanle.html" target="window">Load C</A><BR> 


如 果 用 户 的 浏览 器 不 支持 框架 技术 ， 则 显示 < 过 ame>…</iframe> 标签 之 间 的 文字 “Here is a Floating 
Frame”; 如 果 支 持 ， 则 显示 <iframe> 标签 的 src 属性 指定 的 页 面 ， 效 果 如 图 13 (a ) 所 示 。 点 击 Load A、 
Load B 或 Load C 文字 链接 ， 则 在 浮动 帧 区 域 中 显示 相应 的 链接 文件 ， 效 果 如 图 13 (b ) 所 示 。 
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二 、 判 断 题 
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三 、 填 空 题 

1. 开 发 人 员 标准 

2. 设 计 代码 拆 分 
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四 、 操 作 题 

略 


第 


一 、 选 择 题 

1 外 多 巡 本 恋 未 厂 

二 、 判 断 题 

BN 2 BR WY EY 

三 、 填 空 题 

1. 左 对 齐 ”居中 对 齐 ” 右 对 齐 ” 两 端 对 齐 
2. 回 车 或 Enter 

3. 实体 参考 

四 、 操 作 题 

略 


1 


2 


3 


十 


攻 


几 


附录 2 
参考 答案 


367 


368 Breemmweevar GE2018 
车 开放 入 门 与 汪 襄 


第 


一 、 选 择 题 

DE 4BCD. dD 
二 、 判 断 题 
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三 、 填 空 题 

1. <img> 
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机 入 这 动 包 马 条 从 
二 、 判 断 题 
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三 、 填 空 题 
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三 、 填 空 题 

1. 最 多 

2. 表单 

3. 相同 的 名 称 ” 域 值 

4.POST GET 

5. 红色 虚线 框 

四 、 操 作 题 
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五 、 简 答题 

表单 的 处 理 过 程 是 : 当 用 户 填 写 了 表单 并 提交 后 ， 填 写 的 信息 发 送 到 服务 器 上 ， 服 务 器 脚本 或 应 用 
程序 对 信息 进行 处 理 ， 并 将 处 理 结果 反馈 给 浏览 者 ， 或 执行 某 些 特定 的 操作 。 
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四 、 操 作 题 

略 


